Webmasters Gallery

<div class="player">
  <video poster="film.jpg"controls>
    <source src="film.mp4"type="video/mp4">
    …
  </video>
</div>

Plyr adds classic buttons for play and pause as well as volume control. It also displays a button to switch into fullscreen mode and one to show subtitles. A progress bar that allows you to skip back and forth on both audio and video is also included by default. Additionally, the current playing time and the total duration are displayed.

SVG Icons Can be Changed

Apart from that, there are plenty of options to modify the appearance and behaviour of the user interface via JavaScript. This way you can choose which buttons and what information should be displayed. The name of the buttons can also be defined using a language object.

plyr.setup({
  controls: ["play", "volume"],
  i18n: {play: "Get it going", volume: "Let's get loud"}
})

In the example, only the play and volume buttons are shown via „plyr.setup()“. The designation is done via „i18n“. The labels are shown using tool tips.

The looks of the player can be adjusted using a stylesheet. Besides a classic stylesheet file, there is also a SASS and a LESS variant. You can replace the SVG file and use your own icons instead.

Accessible Controls and Responsive Presentation

All of the player’s elements are labelled semantically with HTML5. The volume control is given as a „“ element with a „range“ attribute. The progress bar is realised by a „“ element.

Screenreader and WebVTT are supported as well. The latter allows for the display of subtitles to make video files accessible for hearing-impaired people.

Support of WebVTT for Subtitle Display

When using HTML5 and SVG, the support of responsive layouts is pretty much essential. Plyr does an examplary job with that as well. Videos are always displayed so that their maximum width is the width of the browser tab or the display.

The user interface can also be aligned in several lines if necessary.

YouTube Videos Running in Your Own Player

Especially videos are often hosted via YouTube and integrated into your website. Because of Plyr, you can still use your own design for these videos as well. The framework allows you to equip external YouTube videos with the user interface of Plyr. You simply need to integrate a „

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

document.querySelectorAll(".player")[0].plyr.pause();