HTML javascript播放视频，但是单击按钮时，播放不同的视频一次，然后返回原始视频答案

【问题标题】：HTML javascript play video, but when button is clicked, play different video once, and then go back to the original videoHTML javascript播放视频，但是单击按钮时，播放不同的视频一次，然后返回原始视频
【发布时间】：2021-04-30 08:29:47
【问题描述】：

我想循环播放默认视频，但是当单击按钮时，我想播放另一个视频一次，然后返回到正在播放的视频。现在我可以按按钮切换到 vid2，但无法切换回原始视频。如何播放一次视频并切换回旧视频？提前致谢。

<!DOCTYPE html> 
<html> 
<body> 
<video width="1920" id="src.mp4" autoplay controls loop>
  <source src="vid1.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<button type="button" name="button" onclick="playVid2()">Click me to change the video</button>

<script>
function playVid2(){
  var video =  document.getElementById("src.mp4");
  video.src = 'vid2.mp4';
  video.load();
  video.play();
  video.src = 'vid1.mp4';
  video.load();
  video.play();
}
</script>
</body> 
</html>

【问题讨论】：

第二个视频结束后，您可以使用ended 事件切换回主视频
我试过了，结果和我想象的一样。非常感谢！

标签： javascript html video

【解决方案1】：

如果视频结束，您应该能够收听，然后再次加载第一个视频。

function playVid2()
{
    var video = document.getElementById("src.mp4");
    video.src = 'vid2.mp4';
    video.load(); video.play();

    video.addEventListener('ended', on_Vid_Ended, false);
}

function on_Vid_Ended( evt )
{
    evt.target.removeEventListener(evt.type, handler);
    video.src = 'vid1.mp4';
    video.load(); video.play();
}

在事件监听器被触发后也取消订阅它，以免泄漏。

【讨论】：