VidPly

VidPly is a modern, feature-rich media player built with vanilla ES6 JavaScript. It combines the best accessibility features from AblePlayer with the streaming capabilities of MediaElement.js, delivering full WCAG 2.1 AA compliance and support for 5 languages out of the box.

Key Highlights

• Zero Dependencies - Pure vanilla JavaScript, no frameworks required
• Accessibility First - WCAG 2.1 AA compliant with full keyboard and screen reader support
• Multilingual - Built-in translations for 5 languages with easy extensibility
• Fully Customizable - CSS variables and comprehensive JavaScript API
• Modern Build - ES6 modules with tree-shaking support
• Production Ready - Thoroughly tested with real-world media content

System Requirements

• Node.js 18+ for building
• Modern browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
• iOS Safari 14+ and Android Chrome 90+

Core Media Support

Feature	Support
Video	MP4, WebM, OGG
Audio	MP3, OGG, WAV
YouTube	Embedded with unified controls
Vimeo	Embedded with unified controls
HLS	Adaptive bitrate streaming
Playlists	Audio and video with thumbnails
Languages	EN, ES, FR, DE, JA + custom

Accessibility Features (WCAG 2.1 AA)

Keyboard Navigation

• All features accessible via keyboard
• Custom shortcuts for common actions
• Menu navigation with Arrow keys
• Logical focus order with visible indicators

Screen Reader Support

• Complete ARIA labels (aria-controls, aria-expanded, aria-haspopup)
• Live regions for dynamic announcements
• Semantic HTML structure

Interactive Transcripts

• Click any line to seek to that point
• Searchable text content
• Auto-scroll during playback
• Draggable and resizable window

Sign Language Overlay

• Picture-in-picture display
• Drag and resize functionality
• Keyboard accessible positioning
• Multiple sign language support

Audio Description

• Alternate audio track with visual content descriptions
• Toggle between standard and described version

Additional Accessibility

• Caption styling customization (font, size, color, opacity, edge style)
• High contrast mode support (Windows HCM)
• Color-independent design
• 44x44px minimum touch targets for mobile

Captions and Subtitles

• WebVTT Support - Standard caption format
• Multiple Languages - Multi-track support with easy switching
• Caption Selector - Easy track switching via CC button
• Caption Styling - Dedicated styling menu
• Chapter Navigation - Jump to video chapters

Playback Features

• Adjustable Speed - 0.25x to 2x playback
• Seek Controls - Forward and backward navigation
• Volume Control - 0-100% with mute toggle
• Loop Playback - Single or playlist loop
• Fullscreen Mode - Native fullscreen API with smart playlist overlay
• Picture-in-Picture - PiP support for multitasking

Playlist Functionality

• Audio playlists with track information
• Video playlists with thumbnails
• Previous and Next controls
• Visual playlist panel
• Auto-advance to next track
• Fullscreen Mode - YouTube-style horizontal carousel with auto-show/hide
• Swipeable touch interface
• Responsive card layout

Internationalization

Built-in support for 5 languages:

• English (en)
• Spanish (es) - Espanol
• French (fr) - Francais
• German (de) - Deutsch
• Japanese (ja)

All UI elements are fully translated, including control buttons and menus, time display and duration formatting, keyboard shortcuts, error messages, and ARIA labels for screen readers. Custom translations can be added via JSON or YAML files.

Keyboard Shortcuts

Key	Action
Space / P / K	Play/Pause
F	Toggle Fullscreen
M	Mute/Unmute
Up / Down Arrow	Volume Up/Down
Left / Right Arrow	Seek -10s / +10s
C	Toggle Captions
A	Open Caption Style Menu
< / >	Decrease/Increase Speed
S	Open Speed Menu
Q	Open Quality Menu
J	Open Chapters Menu
T	Toggle Transcript
D	Toggle Drag Mode
R	Toggle Resize Mode
Escape	Exit Mode or Close Menus
Home	Reset Position

Installation

Build from Source

 

npm install
npm run build

 

This creates minified files in the dist/ folder.

ES Module (Recommended)

 

<link rel="stylesheet" href="dist/vidply.min.css">
<script type="module">
  import Player from './dist/vidply.esm.min.js';
</script>

 

Traditional Script Tag (IIFE)

 

<link rel="stylesheet" href="dist/vidply.min.css">
<script src="dist/vidply.min.js"></script>
<script>
  const player = new VidPly.Player('#my-video', {
    controls: true,
    autoplay: false,
    volume: 0.8,
    language: 'en'
  });
</script>

 

Basic Usage

Video Player

 

<video data-vidply width="800" height="450">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="captions-en.vtt" srclang="en" label="English">
</video>

 

The data-vidply attribute auto-initializes the player.

Audio Player

 

<audio data-vidply>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

 

YouTube Video

 

<video data-vidply src="https://www.youtube.com/watch?v=VIDEO_ID"></video>

 

Vimeo Video

 

<video data-vidply src="https://vimeo.com/VIDEO_ID"></video>

 

HLS Streaming

 

<video data-vidply src="https://example.com/stream.m3u8"></video>

 

Configuration Options

Option	Type	Default	Description
width	number	800	Player width
height	number	450	Player height
poster	string	null	Poster image URL
responsive	boolean	true	Responsive sizing
autoplay	boolean	false	Auto-start playback
loop	boolean	false	Loop playback
muted	boolean	false	Start muted
volume	number	0.8	Default volume (0-1)
playbackSpeed	number	1.0	Default speed (0.25-2.0)
controls	boolean	true	Show controls
keyboard	boolean	true	Enable keyboard shortcuts
language	string	'en'	UI language
captions	boolean	true	Enable captions support
captionsDefault	boolean	false	Show captions by default
transcript	boolean	false	Show transcript panel
debug	boolean	false	Debug logging

JavaScript API

Playback Control

 

player.play()           // Start playback
player.pause()          // Pause playback
player.stop()           // Stop and reset
player.toggle()         // Toggle play/pause
player.seek(30)         // Seek to 30 seconds
player.seekForward(10)  // Skip forward 10 seconds
player.seekBackward(10) // Skip backward 10 seconds

 

Volume Control

 

player.setVolume(0.5)   // Set volume (0.0-1.0)
player.getVolume()      // Get current volume
player.mute()           // Mute audio
player.unmute()         // Unmute audio
player.toggleMute()     // Toggle mute state

 

State Information

 

player.getCurrentTime()  // Get current time
player.getDuration()     // Get duration
player.isPlaying()       // Check if playing
player.isPaused()        // Check if paused
player.isFullscreen()    // Check if fullscreen

 

Event Listeners

 

player.on('ready', () => {})
player.on('play', () => {})
player.on('pause', () => {})
player.on('ended', () => {})
player.on('timeupdate', (time) => {})
player.on('volumechange', (volume) => {})
player.on('error', (error) => {})

 

Custom Styling

VidPly provides extensive CSS variables for easy customization:

 

.vidply-player {
  --vidply-primary-color: #3b82f6;
  --vidply-background: rgba(0, 0, 0, 0.8);
  --vidply-text-color: #ffffff;
  --vidply-button-size: 40px;
  --vidply-icon-size: 20px;
  --vidply-radius-sm: 4px;
  --vidply-radius-md: 8px;
  --vidply-transition-fast: 150ms;
  --vidply-transition-normal: 300ms;
}

 

Build Output

• dist/vidply.esm.min.js - ES Module (production, ~50KB)
• dist/vidply.min.js - IIFE bundle (production, ~52KB)
• dist/vidply.min.css - Styles (minified, ~12KB)

Total: ~62KB uncompressed, ~18KB gzipped

Mobile Optimization

VidPly is mobile-friendly by default with a breakpoint at 768px:

• Transcript window appears below the video (not draggable)
• Optimized control bar with overflow menu
• Touch-friendly interface with 44px minimum touch targets
• Volume control via hardware buttons (standard mobile behavior)
• Pseudo-fullscreen mode for iOS Safari compatibility

Live Demos

• Main Demo - Full-featured video player showcase
• Audio Playlist - Audio player with playlist support
• Video Playlist - Video playlist with thumbnails
• HLS Streaming - Adaptive bitrate streaming demo

Credits

Inspired by:

• AblePlayer - Accessibility features
• MediaElement.js - Streaming support

License and Author

VidPly is released under the GNU General Public License v2.0 or later.
Developed by Matthias Peltzer.