无缝交换视频

Question

我很好奇从一个视频到另一个视频无缝交换的最佳方式是什么。总体目标是播放介绍视频，当视频结束时，播放循环动画的第二个视频。

哪种方法最适用于此？

1. 创建启动第二个视频的事件监听器，并在第一个视频结束后立即隐藏第一个视频
2. 或者在一个视频中拥有它，事件监听器等到视频结束并重置循环开始的时间

对于第二个选项，假设视频为10s长，介绍部分为4s，循环部分为6s。一旦视频播放一次，我们将等到10s标记并在4s重新开始。

有更好的方法可以做到这一点，还是正确的方式之一？

Answer 1

我会使用方法1.添加一个监听器和代码来播放第二个视频很容易：

  <video src="video.ogv" id="intro">
      video not supported
    </video>
    <video src="video.ogv" id="loop">
      video not supported
    </video>

    <script type='text/javascript'>
    var vid = document.getElementById("loop");
   vid.loop = true;
   vid.pause()
    document.getElementById('into').addEventListener('ended',myHandler,false);
        function myHandler(e) {
            vid.play()
        }
    </script>

然后，您还可以添加Jquery隐藏和显示以使其更加无缝。