Ditulis oleh: Ditulis pada: 10/14/2018
Cara Embed File m3u8 Dengan Responsive Video HTML5 - File m3u8 secara sederhana adalah file encode dari m3u yang berisi daftar putar atau playlist untuk sebuah streaming di internet. Mengacu pada istilah streaming, file m3u8 sering digunakan untuk sebuah streaming tv online, tetapi ada juga yang menggunakannya untuk video streaming biasa.Untuk dapat memutar file m3u8, diperlukan HLS (HTTP Live Streaming) untuk mendownload dan mendistribusikan playlist dari m3u8 menjadi satu kesatuan video streaming.
Dan untuk meng-embed file m3u8 di website, kita bisa menggunakan elemen video HTML5 dengan menggunakan sebuah plugin yang support HLS.
Kita bisa mengunakan plugin yang support HLS yang gratis yaitu plugin Fluid Player. Dengan ini kita bisa melakukan kustom video HTML5.
Jika Anda memiliki file m3u8 dan ingin menampilkannya di blog untuk ditonton secara online, silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan simpan kode berikut ini di atas kode
</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 kode berikut ini di atas kode
</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 kode 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 kode
file_m3u8 dengan URL hosting file m3u8 Anda. Anda juga bisa menambahkan gambar background ketika loading player pada poster=""Di sini saya tidak menyertakan demonya, namun saya sudah mencoba kode-kode di atas dan berjalan sempurna.
Silahkan dicoba dan semoga bermanfaat.