Javascript 如何让视频暂停、播放另一个视频并恢复到原始视频_Javascript_Html_Video_Event Handling

Javascript 如何让视频暂停、播放另一个视频并恢复到原始视频

javascript html video

Javascript 如何让视频暂停、播放另一个视频并恢复到原始视频,javascript,html,video,event-handling,Javascript,Html,Video,Event Handling,我有两个视频，我希望第一个视频播放10秒，暂停，播放第二个视频，当第二个视频停止时，从停止的位置返回到播放第一个视频。有点像广告/商业广告目前我有两个视频，在第一个视频完全结束后按顺序播放。我知道解决方案在JavaScript事件处理程序中，但我似乎无法正确地得到它 HTML: 这里有一个在chrome、safari和firefox上测试过的解决方案：（我更改了第二个视频，以便能够判断它是否正常工作，但您当然可以设置您想要的解决方案）： var vid=document.getElement

我有两个视频，我希望第一个视频播放10秒，暂停，播放第二个视频，当第二个视频停止时，从停止的位置返回到播放第一个视频。有点像广告/商业广告

目前我有两个视频，在第一个视频完全结束后按顺序播放。我知道解决方案在JavaScript事件处理程序中，但我似乎无法正确地得到它

HTML:

这里有一个在chrome、safari和firefox上测试过的解决方案：（我更改了第二个视频，以便能够判断它是否正常工作，但您当然可以设置您想要的解决方案）：


var vid=document.getElementById（'video1'）；
参见addEventListener（“结束”，hideVideo，false）；
函数hideVideo（事件）{
console.log（“hideVideo”）；
var vid=document.getElementById（'video1'）；
参阅暂停（）；
vid.style.display='none'；
参见removeEventListener（“结束”，hideVideo，false）；
var vid2=document.getElementById（'video2'）；
vid2.style.display='block'；
vid2.添加的监听器（“结束”，hideVideo2，false）；
vid2.load（）；
}
函数hideVideo2（事件）{
console.log（“hideVideo2”）；
var vid2=document.getElementById（'video2'）；
vid2.style.display='none'；
var vid=document.getElementById（'video1'）；
vid.style.display='block'；
视频播放（）；
}
//启动计时器（毫秒）
setTimeout（hideVideo，10000）；

这很有效，谢谢，但有一个小问题。。第二个视频在设置超时时间开始播放。我希望第二个视频在00:00开始播放它自己的视频。您对此有解决方案吗？我们可以添加load（）命令从头开始，请参见上面代码中的更改，谢谢

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

<!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>