Cara menjeda video, memutar video lain, dan melanjutkan ke video asli

Saya memiliki dua video, saya ingin video pertama diputar selama 10 detik, jeda, putar video kedua, dan ketika video kedua berhenti, kembali memutar video pertama dari bagian terakhirnya. Seperti iklan/komersial.

Saat ini saya memiliki dua video, yang diputar secara berurutan, setelah video pertama selesai sepenuhnya. Saya tahu solusinya ada di event handler JavaScript tetapi sepertinya saya tidak bisa melakukannya dengan benar.

HTML:

<div class="vidBox" id="contain">

  <video id="video1" class="vid" muted controls="true" height="300" width="500">
      <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
  </video>

  <video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500">
    <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
  </video>

</div>

JavaScript:

var vid = document.getElementById('video1');
vid.addEventListener("ended", hideVideo, false);

function hideVideo() {
    var vid = document.getElementById('video1');
    var vid2 = document.getElementById('video2');
    vid.removeEventListener("ended", hideVideo, false);
    vid.style.display='none';
    vid2.style.display='block';
}

javascript html event-handling video
person T.Doe    schedule 29.03.2017    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Berikut ini salah satu solusinya, diuji pada chrome, safari, firefox: (Saya mengubah video kedua untuk mengetahui apakah itu berfungsi, tetapi tentu saja Anda dapat mengatur yang Anda inginkan):

<!DOCTYPE html> 
<html> 

<head>
</head>
<body> 

<div class="vidBox" id="contain">

  <video id="video1" class="vid" muted controls="true" height="300" width="500" autoplay>
      <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
  </video>

  <video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500">
    <source src="myVideo3.mp4" type="video/mp4">
  </video>

</div>

<script type="text/javascript">
var vid = document.getElementById('video1');
vid.addEventListener("ended", hideVideo, false);

function hideVideo(event) {
    console.log("hideVideo");
    var vid = document.getElementById('video1');
    vid.pause();
    vid.style.display='none';
    vid.removeEventListener("ended", hideVideo, false);

    var vid2 = document.getElementById('video2');
    vid2.style.display='block';
    vid2.addEventListener("ended", hideVideo2, false);
    vid2.load();
}

function hideVideo2(event) {
    console.log("hideVideo2");
    var vid2 = document.getElementById('video2');
    vid2.style.display='none';

    var vid = document.getElementById('video1');
    vid.style.display='block';
    vid.play();
}

// start timer in milliseconds
setTimeout( hideVideo, 10000);

</script>

</body> 
</html>
person WeHumLove    schedule 29.03.2017
comment
Ini berfungsi dengan baik, terima kasih tetapi ada sedikit masalah.. Video kedua mulai diputar pada waktu yang ditentukan. Saya ingin video kedua mulai diputar pada pukul 00:00 dari videonya sendiri. Apakah Anda punya solusi untuk ini? - person T.Doe; 30.03.2017
comment
Kita bisa menambahkan perintah load() untuk memulai dari awal, lihat perubahannya pada kode di atas, Salam - person WeHumLove; 30.03.2017