Home Linux Install and use Plyr – HTML5, YouTube, and Vimeo Player

Install and use Plyr – HTML5, YouTube, and Vimeo Player

By

-

May 27, 2022

2004

Plyr is a simple, customizable, and accessible HTML5, Video, Audio, and Vimeo Media Player that supports modern browsers.

Some of its features include;

Easily customizable to make the player look how you want it to appear.
Offers Monetization options for your videos.
Enhances video and audio frames making them responsive.
Standardized API to toggle between videos and volume.
Supports Keyboard Shortcuts.
Support displaying preview thumbnails.
Support for multiple captions tracks.
Picture in Picture mode support.
Support fullscreen in all browsers that support it.

This guide will show you how to install and configure Plyr, HTML5, YouTube, and Vimeo Media Player

Install Plyr as HTML5, YouTube, and Vimeo Video Player

Go to the GitHub releases page to download the source code of Plyr.

VER=$(curl -s https://api.github.com/repos/sampotts/plyr/releases/latest|grep tag_name|cut -d '"' -f 4)
wget https://github.com/sampotts/plyr/archive/refs/tags/${VER}.tar.gz

Once downloaded, extract the zip file and find the index.html file in the demo folder. This is the folder you can use to edit.

tar xvf ${VER}.tar.gz
cd plyr-*/

You can also create a new HTML file with your favorite text editor and build the video player from scratch. I will be using Notepadd++

Open your text editor and paste this sample to create a simple HTML document.

<html>
  <head>
    <title>Intergrate Plyr.io</title>
  </head>
  <body bgcolor="#afafaf">
    <h1>We are going to do a Quick setup of Plyr.io.</h1>
  </body>
</html>

The document will be blank with just the heading as shown.

Once done, we can then continue to add the basic elements of the video player to the HTML document. In short, we are going to set up our Plyr.

Add HTML5 Video

To add a simple HTML video tag, you can use the following code. You can change the path of your video.

<video id="player" playsinline controls data-poster="C:\Users\Admin\Downloads\encanto.jpg">
  <source src="C:\Users\Admin\Downloads\Video\Encanto.mp4" type="video/mp4" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

Then integrate it with plyr.io using the following script before the closing <body> tag.

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

Include the Plyr CSS stylesheet into the <head> tag

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

You can also use direct styling with attributes listed under CSS on the Plyr documentation.

Add HTML5 Audio

I will not be adding audio in this guide, But you will just have to edit the path where your audio is and give its type as shown below.

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

Add YouTube Video

You can embed a YouTube video using its URL in the Plyr. Use the following code. Then on the video tag, change the source of the video to pic the one from YouTube.

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Add Vimeo Video

The same way you can embed a YouTube video is the same way it works for Vimeo. Use the following code.

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Run the code and view your work. It should appear something close to mine as shown below.

Conclusion

From this guide, we have learned how to configure Plyr, HTML5, YouTube, Vimeo Video Player. It is easily accessible and highly customizable making it reliable. Plyr has a lot of features that are favorable to many people using it. There are so many ways to customize and make it appear as you want. Find more attributes on its official documentation on Github.

Similar guides:

LEAVE A REPLY Cancel reply