17. Plyr.js

Lightweight, accessible, beautiful video player

Plyr Player Demo

Plyr provides a consistent, accessible video player experience across all browsers.

<video id="player" controls> <source src="video.mp4" type="video/mp4" /> <track kind="captions" src="captions.vtt" srclang="en" /> </video> <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" /> <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script> <script> const player = new Plyr('#player', { controls: [ 'play-large', 'restart', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ], settings: ['captions', 'quality', 'speed'], }); </script>
Plyr features:
  • ~25KB bundle size
  • Excellent accessibility (WCAG compliant)
  • Consistent styling across browsers
  • Keyboard shortcuts
  • Picture-in-picture support
  • Customizable controls