Memainkan Dua Sumber Video Atau Lebih Dalam Satu Elemen Video Html5
Hal ini dapat dilakukan dengan pinjaman javascript untuk memutar bab pertama lalu menyambung ke bab selanjutnya hingga video selesai.Berikut javascript-nya, silahkan simpan di atas aba-aba
</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 aba-aba 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 bila ada.
Kemudian tambahkan CSS berikut ini semoga 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