VidPly Demo

Universal, Accessible Video & Audio Player

Video Demo – Multi-language Captions & Audio Description Tracks

Deadline animation demo featuring six caption languages, matching description text tracks, and an audio description toggle so you can switch between the original and described video sources.

Deadline video with multiple caption and description tracks
View HTML Code 
<video
  data-vidply
  data-audio-description-button="true"
  data-transcript-button="true"
  data-theme="dark"
  poster="media/deadline_thumbnail.jpg">
  <source
    src="media/deadline.mp4"
    type="video/mp4"
    data-desc-src="media/deadline_desc.mp4"
    data-orig-src="media/deadline.mp4" />
  <track kind="captions" src="media/deadline_captions_en.vtt" srclang="en" label="English" default />
  <track kind="captions" src="media/deadline_captions_es.vtt" srclang="es" label="Español" />
  <track kind="captions" src="media/deadline_captions_it.vtt" srclang="it" label="Italiano" />
  <track kind="captions" src="media/deadline_captions_pt-br.vtt" srclang="pt-BR" label="Português (Brasil)" />
  <track kind="captions" src="media/deadline_captions_ar.vtt" srclang="ar" label="العربية" />
  <track kind="captions" src="media/deadline_captions_hi.vtt" srclang="hi" label="हिन्दी" />
  <track kind="descriptions" src="media/deadline_descriptions_en.vtt" srclang="en" label="English Descriptions" />
  <track kind="descriptions" src="media/deadline_descriptions_es.vtt" srclang="es" label="Español Descripciones" />
  <track kind="descriptions" src="media/deadline_descriptions_it.vtt" srclang="it" label="Italiano Descrizioni" />
  <track kind="descriptions" src="media/deadline_descriptions_pt-br.vtt" srclang="pt-BR" label="Português (Brasil) Descrições" />
  <track kind="descriptions" src="media/deadline_descriptions_ar.vtt" srclang="ar" label="العربية وصف" />
  <track kind="descriptions" src="media/deadline_descriptions_hi.vtt" srclang="hi" label="हिन्दी विवरण" />
</video>

Video Demo – Metadata Alerts, Sign Language Overlay & Chapters

Shows metadata-driven instruction alerts with automatic pause/focus, multi-language captions and chapters, full audio description support, plus an interactive sign language inset that can be repositioned and resized.

Working with Accessibility video with sign language overlay and chapters
View HTML Code 
<video
  data-vidply
  data-sign-language-src-en="media/wwa_sign_en.mp4"
  data-sign-language-src-de="media/wwa_sign_de.mp4"
  data-sign-language-button="true"
  data-sign-language-position="bottom-right"
  data-audio-description-button="true"
  data-transcript-button="true"
  poster="media/wwa_hq_thumbnail.jpg">
  <source src="media/wwa.mp4" type="video/mp4" data-desc-src="media/wwa_described.mp4" data-orig-src="media/wwa.mp4" />
  <source src="media/wwa.webm" type="video/webm" data-desc-src="media/wwa_described.webm" data-orig-src="media/wwa.webm" />
  <track kind="captions" src="media/wwa_captions_en.vtt" srclang="en" label="English" default />
  <track kind="captions" src="media/wwa_captions_es.vtt" srclang="es" label="Español" />
  <track kind="captions" src="media/wwa_captions_fr.vtt" srclang="fr" label="Français" />
  <track kind="captions" src="media/wwa_captions_de.vtt" srclang="de" label="Deutsch" />
  <track kind="captions" src="media/wwa_captions_ja.vtt" srclang="ja" label="日本語" />
  <track kind="chapters" src="media/wwa_chapters_en.vtt" srclang="en" label="English Chapters" />
  <track kind="chapters" src="media/wwa_chapters_es.vtt" srclang="es" label="Español Capítulos" />
  <track kind="chapters" src="media/wwa_chapters_fr.vtt" srclang="fr" label="Français Chapitres" />
  <track kind="chapters" src="media/wwa_chapters_de.vtt" srclang="de" label="Deutsch Kapitel" />
  <track kind="chapters" src="media/wwa_chapters_ja.vtt" srclang="ja" label="日本語 チャプター" />
  <track kind="descriptions" src="media/wwa_description_en.vtt" srclang="en" label="English Descriptions" />
  <track kind="descriptions" src="media/wwa_description_es.vtt" srclang="es" label="Español Descripciones" />
  <track kind="descriptions" src="media/wwa_description_fr.vtt" srclang="fr" label="Français Descriptions" />
  <track kind="descriptions" src="media/wwa_description_de.vtt" srclang="de" label="Deutsch Beschreibungen" />
  <track kind="descriptions" src="media/wwa_description_ja.vtt" srclang="ja" label="日本語 説明" />
  <track kind="metadata" src="media/wwa_meta.vtt" srclang="en" />
</video>

Video Demo – IT Accessibility Source Swap

IT Accessibility excerpt illustrating how data-desc-src swaps the media and related caption/chapter tracks to deliver a fully described playback while keeping bilingual subtitles available.

IT Accessibility video with audio description source swapping
View HTML Code 
<video
  data-vidply
  data-audio-description-button="true"
  data-transcript-button="true"
  poster="media/itaccess.jpg">
  <source
    src="media/itaccess_excerpt.mp4"
    type="video/mp4"
    data-desc-src="media/itaccess_excerpt_described.mp4"
    data-orig-src="media/itaccess_excerpt.mp4" />
  <track
    kind="captions"
    src="media/itaccess_excerpt_captions_en.vtt"
    data-desc-src="media/itaccess_excerpt_described_captions_en.vtt"
    srclang="en"
    label="English"
    default />
  <track kind="subtitles" src="media/itaccess_excerpt_subtitles_es.vtt" srclang="es" label="Español" />
  <track
    kind="chapters"
    src="media/itaccess_excerpt_chapters_en.vtt"
    data-desc-src="media/itaccess_excerpt_described_chapters_en.vtt"
    srclang="en"
    label="Chapters" />
</video>

Audio Player - French Song

Music player showcasing time-synced captions in English and French alongside chapter cues so vocals and verses stay accessible for screen reader and keyboard users.

French song with bilingual captions and chapter markers
View HTML Code 
<audio data-vidply data-vidply-options='{"controls": true}'>
  <source src="media/frenchsong.mp3" type="audio/mpeg" />
  <source src="media/frenchsong.ogg" type="audio/ogg" />
  <track kind="captions" src="media/frenchsong_captions_en.vtt" srclang="en" label="English" default />
  <track kind="captions" src="media/frenchsong_captions_fr.vtt" srclang="fr" label="Français" />
  <track kind="chapters" src="media/frenchsong_chapters_en.vtt" srclang="en" label="Chapters" />
</audio>

Audio Player - Paul Allen Interview

Bilingual interview example with English and German caption tracks and a metadata file that can drive interactive cue-based callouts.

Paul Allen interview with bilingual captions and metadata

Audio Player - Simple Audio

Lightweight audio player demonstrating straightforward MP3/OGG playback with VidPly defaults.

Simple audio playback without additional features

Feature Overview

VidPly blends modern playback controls, accessibility tooling, text-track innovations, streaming, and playlist utilities into a single dependency-free TypeScript player that ships as vanilla ES modules.

  • Core Features

    • Play/Pause/Stop
    • Progress Scrubbing
    • Preview Thumbnails
    • Volume Control
    • Playback Speed (0.25x-2x)
    • Fullscreen Mode
    • Picture-in-Picture
    • Seek Forward/Backward
    • Responsive Design
    • Lazy Loading
    • Buffering Spinner
    • Optional Download Button

  • Accessibility

    • Full Keyboard Navigation
    • Screen Reader Support
    • Sign Language Video
    • Audio Descriptions
    • ARIA Labels
    • High Contrast Mode
    • WCAG 2.2 AA Compliant

  • Captions & Text

    • WebVTT Support
    • DASH TTML / stpp Subtitles
    • Native iOS HLS TextTrack Bridge
    • Multiple Languages
    • Customizable Styling
    • Font Size/Family
    • Color Options
    • Background Opacity
    • Chapters & Descriptions
    • Interactive Transcript
    • Draggable & Resizable Windows

  • Formats & Playlists

    • MP4 Video
    • WebM Video
    • MP3 Audio
    • OGG Audio/Video
    • HLS Streaming (.m3u8) — hls.js + native iOS
    • DASH Streaming (.mpd)
    • YouTube Videos
    • Vimeo Videos
    • SoundCloud Tracks & Sets
    • Mixed Media Playlists

  • Keyboard Shortcuts

    • Space/P/K - Play/Pause
    • F - Fullscreen
    • M - Mute/Unmute
    • ↑/↓ - Volume Up/Down
    • ←/→ - Seek 10s
    • J/L - Seek 30s
    • C - Toggle Captions
    • T - Toggle Transcript
    • S - Speed Menu
    • Q - Quality Menu (HLS/DASH)
    • D - Drag Mode
    • R - Resize Mode
    • Home - Reset Position

  • i18n Support

    • English
    • Spanish
    • French
    • German
    • Japanese
    • Custom Languages
    • Easy Translation
JavaScript API

Control players programmatically with a simple, intuitive API. The bundle is authored in strict TypeScript and ships dist/types/index.d.ts alongside the ESM build, so editors get full type-checking and autocompletion.

// Production (minified ESM)
import Player from '../dist/prod/vidply.esm.min.js';

// Or from source (TypeScript)
// import Player from '../src/index';

// Create a new player instance
const player = new Player('#my-video', {
  controls: true,
  autoplay: false,
  loop: false,
  volume: 0.8,
  captions: true,
  captionsDefault: true,
  keyboard: true,
  responsive: true,
  language: 'en',
  downloadButton: false,   // optional download UI
  // downloadUrl: '/files/movie.mp4', // override the file the button serves
});

// Control playback
player.play();
player.pause();
player.seek(30);

// Volume control
player.setVolume(0.5);
player.mute();

// Speed control
player.setPlaybackSpeed(1.5);

// Fullscreen
player.enterFullscreen();

// Captions
player.enableCaptions();

// Event listeners
player.on('play', () => console.log('Playing!'));
player.on('pause', () => console.log('Paused!'));
player.on('timeupdate', (time) => console.log('Time:', time));
player.on('ended', () => console.log('Video ended!'));

// HLS / DASH / native iOS HLS — same event for live caption updates
player.on('textcuesupdate', (cues) => console.log('Caption cues:', cues));

// Buffering state (waiting / seeking / loadstart all surface through here)
player.on('buffering', (isBuffering) => console.log('Buffering:', isBuffering));

// Renderer-driven media (YouTube / Vimeo / SoundCloud, HLS, DASH)
// is auto-detected from the <source> URL — no extra config required.

// Cleanup
player.destroy();