Memainkan Dua Sumber Video Atau Lebih Dalam Satu Elemen Video Html5

Hal ini dapat dilakukan dengan pemberian javascript untuk memutar bab pertama lalu menyambung ke bab selanjutnya hingga video selesai.

Berikut javascript-nya, silahkan simpan di atas arahan </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 arahan 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 jikalau ada.

Kemudian tambahkan CSS berikut ini supaya 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
Sumber https://www.kompiajaib.com/

Share this post