PostPlyr: A simple HTML5 media player with custom controls and WebVTT captions

 

Plyr is a simple HTML5 media player with custom controls and WebVTT captions made by @sam_potts

 

Download Plyr on GitHub or get access to implementation procedures and other options.

 

Features

  • Accessible – full support for captions and screen readers.
  • Lightweight – just 6.4KB minified and gzipped.
  • Customisable – make the player look how you want with the markup you want.
  • Semantic – uses the right elements. <input type=”range”> for volume and <progress> for progress and well, <button>s for buttons. There’s no <span> or <a href=”#”> button hacks.
  • Responsive – as you’d expect these days.
  • Audio & Video – support for both formats.
  • API – toggle playback, volume, seeking, and more.
  • Fullscreen – supports native fullscreen with fallback to “full window” modes.
  • And the best feature in my opinion: No dependencies – written in vanilla JavaScript, no jQuery required.

Here’s a demo of Plyr ( created without editing my templates to include javascripts and css in the header. All code is in the post ):


Stay Connected

Subscribe to RSS Feed

Subscribe to RSS Feed

Follow me on Twitter

Follow me on Twitter

Subscribe via e-mail

Subscribe via e-mail


Post your comment

Leave a Reply

Time limit is exhausted. Please reload the CAPTCHA.