Cara Embed File M3u8 Dengan Responsive Video Html5

Kita dapat mengunakan plugin yang support HLS yang gratis adalah plugin Fluid Player. Dengan ini kita dapat melaksanakan kustom video HTML5.

Jika Anda mempunyai file m3u8 dan ingin menampilkannya di blog untuk ditonton secara online, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan simpan arahan berikut ini di atas arahan </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'/>

Kemudian simpan lagi arahan berikut ini di atas arahan </body>

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

Jika tidak ingin autoplay, silahkan rubah true menjadi false untuk autoPlay.

Tambahkan CSS berikut di dalam style blog Anda.

 .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;
 }

Kemudian gunakan arahan berikut di dalam postingan mode HTML untuk menampilkan embed file m3u8 secara responsive.

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

Silahkan ganti arahan file_m3u8 dengan URL hosting file m3u8 Anda. Anda juga dapat menambahkan gambar background dikala loading player pada poster=""

Di sini aku tidak menyertakan demonya, namun aku sudah mencoba kode-kode di atas dan berjalan sempurna.

Silahkan dicoba dan agar bermanfaat.

Share this post