VidPly

Universal, Accessible Video & Audio Player

Core Features

  • Lightweight - Zero runtime dependencies (hls.js / dash.js loaded only when needed)
  • Authored in strict TypeScript - ships ES modules + .d.ts type declarations
  • Easy Integration - Single data-vidply attribute
  • Responsive Design - Mobile/Tablet/Desktop
  • Video & Audio Playlists (including Mixed Media)
  • Preview Thumbnails on Progress Bar Hover
  • Customizable Playback Speed (0.25x-2x)
  • Volume Control & Mute Toggle
  • Progress Bar with Seek
  • Fullscreen Mode (iOS Compatible)
  • Picture-in-Picture Support (native browser PiP)
  • Custom Floating Player - in-page miniplayer that auto-floats when the original is scrolled out of view, with drag, resize, captions and a manual pin/unpin button (opt-in via floating: true / data-vidply-floating="true"; suppresses native PiP automatically)
  • Centered Buffering Spinner during loading / waiting / seeking
  • Optional Download Button for self-hosted media
  • HLS Streaming - hls.js on most browsers, native HLS bridge on iOS/iPadOS Safari (no MSE), with quality selection and dynamic subtitles in both modes
  • DASH Streaming (MPEG-DASH) with Quality Selection & TTML/stpp / WebVTT Subtitles
  • YouTube, Vimeo & SoundCloud Integration (Widget API wrapper)
  • Lazy Loading for Performance Optimization

Accessibility Features

  • WCAG 2.2 AA Compliant
  • Full Keyboard Navigation
  • Screen Reader Support
  • Multi-Language Captions (WebVTT, plus DASH TTML/stpp and native iOS HLS TextTracks)
  • Customizable Caption Styling
  • Interactive Transcript Window (works for HTML5, HLS - incl. native iOS - and DASH)
  • Sign Language Video Overlay
  • Audio Description Swapping
  • Chapter Navigation
  • Draggable & Resizable Windows (target sizes meet WCAG 2.2 dragging-movement criteria)

Internationalization

  • English, Spanish, French, German, Japanese
  • Custom Language Support (JSON/YAML)
  • Auto-Detection from HTML lang Attribute

Quick Start

Simply add data-vidply attribute to any <video> or <audio> element!

Credits

For the inspiration and sample content, credit goes to Able Player, and for the streaming idea, credit goes to Mediaelement Player.

The audio examples feature songs by Terrill Thompson, Able Player's creator and original lead developer. Check out Terrill's music site for more listening, and to support his work.

The short animated film used in a few demos is The Deadline from the Morevna Project, and is licensed under the terms of Creative Commons Attribution 4.0 license. You are free to share (copy and redistribute) and adapt (remix, transform) this work for any purpose, even commercially as long as you comply to licensing terms.

All other video examples feature clips from videos produced by The DO-IT Center at the University of Washington. Additional videos are available on the DO-IT Video website, which uses Able Player.