Plyr : Simple HTML5 Media Player

Shares

A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

  • Accessible – full support for VTT captions and screen readers
  • Lightweight – under 10KB 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
  • HTML Video & Audio – support for both formats
  • Embedded Video – support for YouTube and Vimeo video playback
  • API – toggle playback, volume, seeking, and more

HTML:

Plyr extends upon the standard HTML5 markup so that’s all you need for those types. More info on advanced HTML markup can be found under initializing.
HTML5 Video

<video poster="/path/to/poster.jpg" controls>
  <source src="/path/to/video.mp4" type="video/mp4">
  <source src="/path/to/video.webm" type="video/webm">
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
</video>

HTML5 Audio:

<audio controls>
  <source src="/path/to/audio.mp3" type="audio/mp3">
  <source src="/path/to/audio.ogg" type="audio/ogg">
</audio>

For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty

):
YouTube embed:

<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

Note: data-video-id value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
Vimeo embed

<div data-type="vimeo" data-video-id="143418951"></div>

Note: data-video-id value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
JavaScript

Include the plyr.js script before the closing tag and then call plyr.setup(). More info on setup() can be found under initialising.

<script src="path/to/plyr.js"></script>
<script>plyr.setup();</script>

JS CDN (provided by Fastly) for the JavaScript:

<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>

CSS:

Include the plyr.css stylsheet into your

<link rel="stylesheet" href="path/to/plyr.css">

CSS CDN (provided by Fastly) – default CSS:

<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">

SVG Sprite:

SVG sprite CDN (provided by Fastly). For reference, the CDN hosted SVG sprite can be found at https://cdn.plyr.io/2.0.13/plyr.svg.

Subscribe to the JqueryPlugins.net mailing list:

* indicates required

Reply

Pin It on Pinterest