Lightweight, accessible, beautiful video player
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>