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

【问题标题】：How to get a video to pause, play another video, and resume to the original video如何让视频暂停、播放另一个视频并恢复到原始视频
【发布时间】：2020-02-19 06:35:47
【问题描述】：

我有两个视频，我希望第一个视频播放 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';
}

【问题讨论】：

标签： javascript html video event-handling

【解决方案1】：

这是一种解决方案，在 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>

【讨论】：

这很好，谢谢，但有一个小问题。第二个视频在 setTimeout 时间开始播放。我希望第二个视频在其自己的视频的 00:00 开始播放。你有解决这个问题的办法吗？
我们可以添加load()命令从头开始，看上面代码的变化，问候