How to Embed m3u8 Files with Responsive Video HTML5 - technogratis

728x90 AdSpace

Trending

How to Embed m3u8 Files with Responsive Video HTML5



How to Embed the m3u8 File with HTML5 Responsive Video - The m3u8 file is simply an encode file from m3u containing a playlist or playlist for streaming on the internet. Referring to the term streaming, the m3u8 file is often used for online streaming tv, but there are also those who use it for ordinary video streaming. 

To be able to play m3u8 files, HLS (HTTP Live Streaming) is required to download and distribute playlists from m3u8 to a single video streaming unit. 

And to embed the m3u8 file on the website, we can use HTML5 video elements using a plugin that supports HLS.

We can use a plugin that supports free HLS plugin, Fluid Player. With this, we can do custom HTML5 videos. 

If you have an m3u8 file and want to display it on a blog to watch online, please follow the steps below. 

Please save the following code above the code</head>

<script>
//<![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.fluidplayer.com/v2/current/fluidplayer.min.css");
//]]>
</script>
<script src='https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js'/>

Then save the following code again above the code </body>

<script>
//<![CDATA[
fluidPlayer(
    'hls-video',
    {
        layoutControls: {
            fillToContainer: true,
            autoPlay: true
        }
    }
);
//]]>
</script>

If you don't want autoplay, please change true to false for autoPlay.

Add the following CSS in your blog style.

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

Then use the following code in the HTML mode post to display the embed m3u8 file responsively.

<div class="video-responsive">
<video id="hls-video" poster="">
    <source src="file_m3u8" type="application/x-mpegURL"/>
</video>
</div>

Please change the code file_m3u8with the URL hosting your m3u8 file. You can also add background images when loading the player. poster=""

Here I do not include the demo, but I have tried the codes above and run perfectly.

Please try and hopefully useful.
How to Embed m3u8 Files with Responsive Video HTML5 Reviewed by ASM Design on November 05, 2018 Rating: 5 How to Embed the m3u8 File with HTML5 Responsive Video - The m3u8 file is simply an encode file from m3u containing a playlist or pla...

No comments: