sampotts/plyr

Plyr is a media player for web pages that works with HTML5 video and audio files, as well as YouTube and Vimeo embeds. It replaces the browser's built-in video player controls with a consistent, customizable interface that looks the same across all modern browsers and works on any screen size. The problem it solves is that different browsers render media players differently, and the native controls are hard to style or extend. Plyr gives developers a single player they can customize with their own colors and layout while still using proper HTML elements (for example, a real slider for volume instead of a styled-up button hack). It exposes a standardized programming interface and event system, so code written to control a YouTube video works the same way as code controlling an HTML5 video, no need to learn each platform's separate API. Features include full keyboard shortcut support, captions with support for multiple caption tracks, picture-in-picture mode (playing video in a small floating window), speed controls, preview thumbnails on the progress bar, fullscreen mode, and streaming support. It can also display ads. Plyr is written in plain JavaScript with no external framework dependencies and includes Sass stylesheets for build integration. Someone would use Plyr when building a website that hosts or embeds video or audio and wants a polished, accessible player with a consistent look and programmatic control.