Usage#

In order to use plyr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/plyr/plyr.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/plyr/plyr.js" />

Video#

Plyr extends upon the standard HTML5 media element markup so that's all you need for those types. Just add your source and initialize it like mentioned below.

<video class="w-100" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="plyr-video-player" playsinline controls>
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>

const videoPlayer = new Plyr('#plyr-video-player');

Audio#

Initialization of audio player is same as video player. Refer below mentioned code to create an audio player using plyr.

<audio class="w-100" id="plyr-audio-player" controls>
  <source src="./assets/audio/Water_Lily.mp3" type="audio/mp3" />
</audio>

const audioPlayer = new Plyr('#plyr-audio-player');