如何讓視頻暫停，播放另一個視頻並恢復到原始視頻

我有兩個視頻，我希望第一個視頻播放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>

的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'; 
}

來源

2017-03-29 T.Doe

這裏是一個解決方案，在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>

來源

2017-03-29 16:18:41 WeHumLove

這很好，謝謝，但有一個輕微的問題..第二個視頻開始pl在setTimeout時間玩是。我希望第二個視頻在其自己的視頻的00:00開始播放。你有解決這個問題嗎？ –

我們可以添加load（）命令從頭開始，查看上面代碼的更改，關心 – WeHumLove

如何讓視頻暫停，播放另一個視頻並恢復到原始視頻

回答

相關問題