Top 3 HTML5 Video Players For Your Blog/Website

Welcome friends to Blogger Codemaster. This is our another post. So in this post, I would like to give you some code scripts by which you can create many different types of video players in HTML5.

So let's get started with our today's topic - TOP 3 HTML5 VIDEO PLAYERS TO USE.

 

WHAT IS A HTML5 VIDEO PLAYER?

Today, world is going to the habit of streaming videos online than downloading them. In such a case, there is a good chance for the website developers to attract users on their sites using various customised and user-friendly video players.

 

Benefits of HTML5 Video Player:

• HTML5 Video Players are mostly open-source, so it is very easy to customise them according to our wish.
  
• Most HTML5 Video Players are free, so we can use them without thinking about our expenses.
• HTML5 gives a better user-friendly interface to the users than the default video player of the browser.
• HTML5 helps developers to place ads in the videos streaming on the player. Thus, increasing their earnings.
  

TOP 3 FREE, HTML5 VIDEO PLAYERS

1. VIDEO-JS

Video-js is a free, open-source video player which can be configured on HTML5, JS and also on Flash. Video-js has given rise to many different players like Afterglow. It is very easy to use this player. You may copy the code below to configure the player in HTML5. This can also be used in any blogger site.

 <link href="https://vjs.zencdn.net/7.8.3/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
 
<video id="my-video" class="video-js" controls preload="auto" data-setup="{}" poster="">
<source src="YOUR-STREAM-URL" type="video/mp4"/>
</video>
<script src="https://vjs.zencdn.net/7.8.3/video.js"></script>

Do not forget to change  YOUR-STREAM-URL to your streaming link.

2. PLYR

Plur is another free, light weight video player which can be configured on HTML5 and JS. It supports video, live stream, audio, YouTube videos and also Vimeo Videos. You may copy the code below to configure the player in HTML5. This can also be used in any blogger site.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.plyr.io/2.0.18/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.18/plyr.css"/>

<video width="400" height="400" controls crossorigin playsinline id="video" preload="all" autoplay><source src="YOUR-STREAM-URL" type="video/mp4"/></video>
<script>
    plyr.setup(video);
    if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource(url);
    hls.attachMedia(video);

    }
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = url;
    video.addEventListener('canplay',function() {

    });

  }

</script>

 

Do not forget to change  YOUR-STREAM-URL to your streaming link.

3. AFTERGLOW

Afterglow Player is a great, free video player designed basically from Video-js. It is a very nice, smooth video player for better streaming. You may copy the code below to configure the player in HTML5. This can also be used in any blogger site.

<script type="text/javascript" src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>

<video class="afterglow" id="myvideo" width="1280" height="720">
 <source type="video/mp4" src="YOUR-STREAM-URL" />
 </video>

 

Do not forget to change  YOUR-STREAM-URL to your streaming link.

 

Here, we come to the end of our another post. We will discuss various other interesting topics in our upcoming posts. 

 

So uptil then I bid you a goodbye😇. 

Please follow our 👉blog and comment💬 below for any queries.