Ditulis oleh: Ditulis pada: 9/30/2018
Memainkan Dua Sumber Video Atau Lebih Dalam Satu Elemen Video HTML5 - Setelah kita mengetahui cara upload video di Blogger dan membuat embed responsive dengan elemen video HTML5, sekarang kita akan mencoba menggunakan atau memainkan 2 sumber video atau lebih dalam 1 elemen video HTML5.Hal ini berguna jika kita memiliki video yang dipotong menjadi beberapa bagian dengan alasan agar ukurannya menjadi lebih kecil di tiap bagiannya, sehingga tidak terlalu berat ketika menguploadnya.
Dengan ini video dapat diputar seluruh bagiannya dalam 1 elemen video html5 dengan memutar bagian pertama kemudian menyambung ke bagian selanjutnya sampai video selesai.
Hal ini bisa dilakukan dengan bantuan javascript untuk memutar bagian pertama kemudian menyambung ke bagian selanjutnya sampai video selesai.
Berikut javascript-nya, silahkan simpan di atas kode
</body>
<script>
//<![CDATA[
var myvid = document.getElementById('video-id');
myvid.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#video-id source.active");
var nextsource = document.querySelector("#video-id source.active + source") || document.querySelector("#video-id source:first-child");
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
myvid.src = nextsource.src;
myvid.play();
});
//]]>
</script>
Kemudian gunakan kode berikut ini di dalam postingan.
<div class="video-responsive">
<video id="video-id" controls>
<source class="active" type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=1234567891111">
<source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=1234567892222">
<source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=1234567893333">
</video>
</div>
Silahkan ganti URL hosting video MP4 berurutan part 1, part 2, dan seterusnya jika ada.
Kemudian tambahkan CSS berikut ini agar videonya menjadi responsive
.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;
}
Kode di atas sudah dicoba dan berjalan sempurna. Semoga bermanfaat.
Referensi: https://stackoverflow.com/questions/32335076/html5-video-how-to-play-two-videos-in-one-video-element