Cara Embed File M3u8 Dengan Responsive Video Html5

Kita dapat mengunakan plugin yang support HLS yang gratis yakni 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 aba-aba berikut ini di atas aba-aba </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 aba-aba berikut ini di atas aba-aba </body>

 <script>
 //<![CDATA[
 fluidPlayer(
     'hls-video',
     {
         layoutControls: {
             fillToContainer: true,
             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 aba-aba 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 aba-aba 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.
Sumber https://www.kompiajaib.com/

Share this post