Ditulis oleh: Ditulis pada: 11/18/2018
Membuat Multi Server Video Pada Fluid Player File m3u8 - Dalam embed file m3u8 dengan menggunakan plugin Fluid Player seperti pada postingan saya sebelumnya, kita bisa membuat multi server file m3u8 sebagai cadangan jika server utama error maka bisa memilih server lainnya untuk diputar.Sebetulnya ini bukan fitur dari Fluid Player untuk membuat multi server, tetapi kita memanfaatkan fitur pilih kualitas video pada FluidPlayer dan kita hack sedikit untuk tombol HD menjadi tombol SERVER untuk memilih server video.
Dengan begitu kita bisa dengan mudah membuat multi server video atau menambahkan sumber video untuk file m3u8 pada plugin Fluid Player.
Seperti pada postingan saya sebelumnya tentang cara embed file m3u8, kita bisa menggunakan plugin FluidPlayer untuk memutar video HLS m3u8. Dan ada sahabat Kompi yang menanyakan cara membuat multi server pada player m3u8 ini.
Untuk itu sebelum ini saya sudah melakukan beberapa percobaan untuk mencoba mengganti source video dengan javascript, namun gagal. Dan kemudian saya melihat ada fitur ganti kualitas video yang bisa kita manfaatkan untuk mengganti sumber video atau server video dengan sedikit penyesuaian untuk tombolnya dan ternyata bisa berhasil.
Berikut demo multi server video file m3u8 pada Fluid Player. Saya menggunakan 2 video berbeda agar mudah melihat perubahan servernya. Klik tombol "Server" di kanan bawah player.
Jika Anda ingin mencobanya, silahkan ikuti langkah berikut 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,
controlBar: {
autoHide: true,
autoHideTimeout: 3,
animated: true
}
}
}
);
//]]>
</script>
Jika tidak ingin autoplay, silahkan rubah
true menjadi false untuk autoPlay.Tambahkan CSS berikut di dalam style blog Anda agar player menjadi responsive dan untuk merubah tombol HD menjadi SERVER.
.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;
}
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source{width:50px;height:16px}
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source:before{
content:"Server";
font-size:11px;
color:#333;
background:#fff!important;
width:50px;
height:16px;
line-height:16px;
border-radius:2px;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
top:3px;
}
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_controls_right .fluid_button_video_source .fluid_video_sources_list{
bottom:14px;
right: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="Server_1_m3u8" title="Server 1" type="application/x-mpegURL"/>
<source src="Server_2_m3u8" title="Server 2" type="application/x-mpegURL"/>
</video>
</div>
Silahkan ganti kode
Server_1_m3u8 dan Server_2_m3u8 dengan URL hosting file m3u8 Anda. Anda juga bisa menambahkan gambar background ketika loading player pada poster=""
Selesai, selamat mencoba dan semoga bermanfaat.