VidPly

Universal, Accessible Video & Audio Player

Vanilla ES6 WCAG Compliant Responsive Multi-Language Captions Descriptions
Sign Language Demo Audio Playlist Demo Video Playlist Demo HLS Streaming Test

HTML5 Video - Multiple Caption Languages

Professional video with captions in English, Spanish, Italian, Portuguese, Arabic, and Hindi.

<video data-vidply poster="media/deadline_thumbnail.jpg"> <source src="media/deadline.mp4" type="video/mp4"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English" default> <track kind="captions" src="captions_es.vtt" srclang="es" label="Español"> <track kind="descriptions" src="descriptions_en.vtt" srclang="en"> </video>

HTML5 Video - Full Accessibility Suite

Video with captions, chapters, and descriptions in multiple languages (EN, ES, FR, DE, JA).

<video data-vidply poster="media/wwa_thumbnail.jpg"> <source src="media/wwa.mp4" type="video/mp4"> <source src="media/wwa.webm" type="video/webm"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English"> <track kind="chapters" src="chapters_en.vtt" srclang="en"> <track kind="descriptions" src="descriptions_en.vtt" srclang="en"> </video>

HTML5 Video - IT Accessibility Excerpt

Short excerpt with English captions and Spanish/Chinese subtitles.

Audio Player - French Song

Music player with English and French captions plus chapter markers.

<audio data-vidply> <source src="media/frenchsong.mp3" type="audio/mpeg"> <source src="media/frenchsong.ogg" type="audio/ogg"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English"> <track kind="chapters" src="chapters_en.vtt" srclang="en"> </audio>

Audio Player - Paul Allen Interview

Interview audio with German and English subtitles plus metadata track.

Audio Player - Simple Audio

Basic audio player demonstrating MP3 and OGG format support.

Feature Overview

VidPly combines the best features from AblePlayer and MediaElement.js

Core Features

  • Play/Pause/Stop
  • Progress Scrubbing
  • Volume Control
  • Playback Speed (0.25x-2x)
  • Fullscreen Mode
  • Picture-in-Picture
  • Seek Forward/Backward

Accessibility

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

Captions & Text

  • WebVTT Support
  • Multiple Languages
  • Customizable Styling
  • Font Size/Family
  • Color Options
  • Background Opacity
  • Chapters & Descriptions

Formats

  • MP4 Video
  • WebM Video
  • MP3 Audio
  • OGG Audio/Video
  • HLS Streaming (.m3u8)
  • YouTube Videos
  • Vimeo Videos

Keyboard Shortcuts

  • Space/K - Play/Pause
  • F - Fullscreen
  • M - Mute/Unmute
  • ↑/↓ - Volume
  • ←/→ - Seek 10s
  • J/L - Seek 30s
  • C - Toggle Captions

i18n Support

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

JavaScript API

Control players programmatically with a simple, intuitive API.

// Import from built version import Player from '../dist/vidply.esm.js'; // Or from source import Player from '../src/index.js'; // 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' }); // 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!')); // Cleanup player.destroy();