How to Build an HTML5 Audio and Video Player with Plyr

How to Build an HTML5 Audio and Video Player with Plyr
How to Build an HTML5 Audio and Video Player with Plyr



Create HTML5 Audio and Video Players - Plyr is a simple HTML5, YouTube, Vimeo media player that can be used to create audio and video players for a website easily, lightweight, customizable and supports modern browsers.

An audio or video playback in html5 is far superior due to its high performance and good user experience on PC or Smartphone. If you manage a streaming blog, you may already be familiar with the videojs code. Yes, Plyr is very similar to the videojs framework, which fulfills the same functionality and is also compatible with older browsers. However, Plyr has a very satisfying display feature for its users.

If you are looking for a way to make audio or video playback online, Plyr can be very reliable for that. But how do you implement Plyr on a blog? In this post I will share a tutorial on how to make an audio or video media player for blogs using this Plyr code.

How to Build an HTML5 Audio and Video Player with Plyr

In HTML5 to be able to play audio or video online on a website is to use HTML <audio>...</audio>and <video>...</video>. But by using Plyr, we can adjust the options as needed with the desired markup.

Steps to Install Plyr Audio and Video Players on Blogger

The first step is to enter your Blogger account > Themes > Edit HTML , then look for the closing code </head>and paste the code below right above it.
// Kode CSS Plyr
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.6.12/plyr.css");
//]]>
</script>
How to Build an HTML5 Audio and Video Player with Plyr

Next, install plyr.js , find the closing code </body>on your blog template, then copy and paste the code below right above the code.
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
You can also opt for the version that contains a polyfill for browsers that don't support ES6 .
<script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
Finally Copy the following code just below the previous js code ,
<script>//<![CDATA[
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
//]]></script>
So the end result will look like this
Kode Javascript Plyr
<script type='text/javascript' src='https://cdn.plyr.io/3.6.12/plyr.js'></script>
<script type="text/javascript">
/*<![CDATA[*/
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('.js-plyr')).map(plyrs => new Plyr(plyrs));
/*]]>*/
</script>
How to Build an HTML5 Audio and Video Player with Plyr

Installing Plyr Audio and Video Players in Wordpress

To add code to WordPress, you can edit the header.php or footer.php file.

Editing the file is done via the WordPress admin Dashboard page in the Appearance menu > Theme Editor > Theme Header

Copy and Paste the code below just above the closing code</head>
// Kode CSS Plyr
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.6.12/plyr.css");
//]]>
</script>
If so, don't forget to click Save or Update File , Next

Then go to the Theme Footer tab then Copy and Paste the code below just above the closing code</body>
Kode Javascript Plyr
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<script>//<![CDATA[
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
//]]></script>
If so, don't forget to click Save or Update File . If the above steps have been completed, then the next step is how to apply it to the blog, I will discuss the method itself below

How to Implement Plyr on Blogs

With Plyr.js you can implement html5 audio or video, youtube and vimeo. Well, for how you can follow the following tutorial.

Embed Audio

What's new in version 3.0 of Plyr is that it allows you to control the playback speed of the audio, for this the required code is as follows:

<audio class='js-player' controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>
You can also specify various  mp3 formats   , which are the most supported formats. But if you also want to maintain quality, the ogg format can be an option to apply too, so you can apply both formats and that way the browser will choose the best format.
<audio class='js-player' controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
</audio>
Here is an example of a player with an audio file that I have uploaded to Google Drive , for how you can see my article how to get a google drive direct link.

02:43
-02:28

Embed YouTube with Plyr

Plyr also works as a replacement for code to include a youtube video in a blog, The important thing is to get the id of the video, which is found after ?v=, for example

https://www.youtube.com/watch?v=MZk22ATFPTo&t=16s

Well, the link that I blocked is a IDYouTube video, now you can implement it using the following code inside the data-plyr-embed-id html element .
<div class="js-player" data-plyr-embed-id="PZbkF-15ObM" data-plyr-provider="youtube"></div>
or with the following code iframe
<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>
Now, you can control YouTube playback with Plyr on the blog, the result of the code above will look like the following demo page.

YouTube Views Demo

Embed Vimeo with Plyr

The trick is to get the Vimeo video ID first, the method is the same as above, for example the following Vimeo video link,

https://vimeo.com/247535042

The link in the block is the vimeo ID, after getting it the next step is to implement it with the following code
<div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="247535042"></div>
or use the iframe attribute like the YouTube code above
<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>
And for the results you can see the video below

Vimeo View Demo

Embed Videos Directly

Interestingly, Plyr can play videos with links to our multimedia files. If you don't have a place to host your media files, you can use Google drive . And the code to implement the video/or audio playback is as follows
<video class='js-player' controls>
  <source src="video.mp4" type="video/mp4">
</video>
You can also add other video formats, such as webm for high video quality, then the code will be like this
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

00:27
-00:29

Setting Subtitles

You can also add video subtitles, because plyr supports WebVTT subtitles , the method is quite easy, just by adding an HTML5 element <track>. And the sample code will be as follows
<video class='js-player' controls playsinline crossorigin>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- Subtitle -->
  <track kind="captions" label="English" srclang="en" src="captions_en.vtt">
  <track kind="captions" label="Indonesia" srclang="id" src="captions_id.vtt" default>
</video>
If the subtitle and video are hosted on different servers, it is necessary to specify the crossorigin attribute or the subtitle will not appear.

Video Quality

To specify quality options, you need to add an HTML5 <source/> element , with the attribute size=quality , where quality is replaced with video quality, for example:
<video class='js-player' poster="thumbnail.jpg" controls playsinline>
  <!-- Quality -->
  <source src="video_576p.mp4" size="576" type="video/mp4">
  <source src="video_720p.mp4" size="720" type="video/mp4">
  <source src="video_1080p.mp4" size="1080" type="video/mp4">
</video>
00:00
00:30

Closing

So that was how to install audio and video players using Plyr for blogs, if you are confused about following this tutorial, please leave a comment to discuss.

Or to find out more about Plyr, I suggest visiting the Plyr repository on github .

Post a Comment

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post