วิธีทำให้วิดีโอหยุดชั่วคราว เล่นวิดีโออื่น และเล่นวิดีโอต้นฉบับต่อ

ฉันมีวิดีโอสองรายการ ฉันต้องการให้วิดีโอแรกเล่นเป็นเวลา 10 วินาที หยุดชั่วคราว เล่นวิดีโอที่สอง และเมื่อวิดีโอที่สองหยุดแล้ว ให้กลับไปเล่นวิดีโอแรกจากที่ค้างไว้ เหมือนกับโฆษณา/เชิงพาณิชย์

ขณะนี้ฉันมีวิดีโอสองรายการที่เล่นตามลำดับหลังจากที่วิดีโอแรกจบลงอย่างสมบูรณ์ ฉันรู้ว่าวิธีแก้ปัญหาอยู่ในตัวจัดการเหตุการณ์ JavaScript แต่ดูเหมือนว่าฉันไม่สามารถทำให้ถูกต้องได้

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>

จาวาสคริปต์:

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 แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

นี่คือวิธีแก้ปัญหาหนึ่งที่ทดสอบบน Chrome, Safari, Firefox: (ฉันเปลี่ยนวิดีโอที่สองเพื่อให้สามารถบอกได้ว่าใช้งานได้หรือไม่ แต่คุณสามารถตั้งค่าวิดีโอที่คุณต้องการได้):

<!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
ใช้งานได้ดี ขอบคุณ แต่มีปัญหาเล็กน้อย... วิดีโอที่สองเริ่มเล่นในเวลา setTimeout คือ ฉันต้องการให้วิดีโอที่สองเริ่มเล่นเวลา 00:00 น. ของวิดีโอของตัวเอง คุณมีการแก้ไขสำหรับสิ่งนี้หรือไม่? - person T.Doe; 30.03.2017
comment
เราสามารถเพิ่มคำสั่ง load() เพื่อเริ่มต้นจากจุดเริ่มต้น ดูการเปลี่ยนแปลงในโค้ดด้านบน ขอแสดงความนับถือ - person WeHumLove; 30.03.2017