VidPly

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

Key highlights

• No 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 customisable – CSS variables and comprehensive JavaScript API
• Modern structure – ES6 modules with tree shaking support
• Production-ready – Thoroughly tested with real media content

System requirements

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

Support for core media

Accessibility features (WCAG 2.1 AA)

Keyboard navigation

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

Support for screen readers

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

Interactive transcripts

• Click on any line to jump to that location
• Searchable text content
• Automatic scrolling during playback
• Dragable and resizable window

Sign language overlay

• Picture-in-picture display
• Drag and resize function
• Keyboard-accessible positioning
• Support for multiple sign languages

Audio description

• Alternative audio track with descriptions of visual content
• Switch between standard and described versions

Additional accessibility

• Customisation of subtitle style (font, size, colour, opacity, border style)
• Support for high contrast mode (Windows HCM)
• Colour-dependent design
• Touch targets for mobile devices at least 44 x 44 pixels in size

Captions and subtitles

• WebVTT support – standard format for subtitles
• Multiple languages – Support for multiple audio tracks with easy switching
• Caption selection – Easy switching between tracks using the CC button
• Caption styling – Special styling menu
• Chapter navigation – Jump to chapters in the video

Playback functions

• Adjustable speed – 0.25x to 2x playback speed
• Search control – Forward and backward navigation
• Volume control – 0–100% with mute
• Repeat playback – Single repeat or repeat playback of the playlist
• Full-screen mode – Native full-screen API with intelligent playlist overlay
• Picture-in-picture – PiP support for multitasking

Playlist functionality

• Audio playlists with track information
• Video playlists with thumbnails
• Back and forward controls
• Visual playlist window
• Automatic transition to the next track
• Full-screen mode – YouTube-style horizontal carousel with automatic fade-in/fade-out
• Swipeable touch interface
• Responsive card layout

Internationalisation

Integrated support for 5 languages:

• English (en)
• Spanish (es) - Español
• French (fr) - Français
• 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

Installation

Create from source code

npm install
npm run build

This will create minimised files in the dist/ .

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 automatically initialises 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

JavaScript API

Playback control

player.play() // Wiedergabe starten
player.pause() // Wiedergabe pausieren
player.stop() // Stoppen und zurücksetzen
player.toggle() // Wiedergabe/Pause umschalten
player.seek(30) // Zu 30 Sekunden springen
player.seekForward(10) // 10 Sekunden vorwärts springen
player.seekBackward(10) // 10 Sekunden zurückspringen

Volume control

player.setVolume(0.5) // Lautstärke einstellen (0.0-1.0)
player.getVolume() // Aktuelle Lautstärke abrufen
player.mute() // Audio stummschalten
player.unmute() // Audio wieder einschalten
player.toggleMute() // Stummschaltung umschalten

Status information

player.getCurrentTime() // Aktuelle Zeit abrufen
player.getDuration() // Dauer abrufen
player.isPlaying() // Überprüfen, ob Wiedergabe läuft
player.isPaused() // Überprüfen, ob Pause läuft
player.isFullscreen() // Überprüfen, ob Vollbildmodus

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 offers extensive CSS variables for easy customisation:

.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, ~50 KB)
• dist/vidply.min.js – IIFE bundle (production, ~52 KB)
• dist/vidply.min.css – Styles (minimised, ~12 KB)

Total: ~62 KB uncompressed, ~18 KB gzipped

Optimisation for mobile devices

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

• The transcript window is displayed below the video (non-movable)
• Optimised control bar with overflow menu
• Touch-friendly user interface with a minimum size of 44 px for touch targets
• Volume control via hardware buttons (standard behaviour on mobile devices)
• Pseudo full-screen mode for iOS Safari compatibility

Live demos

• Main demo – Fully featured video player
• Audio playlist – Audio player with playlist support
• HLS streaming – Demo for adaptive bitrate streaming

Credits

Inspired by:

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

Licence and author

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