无缝交换视频

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隐藏和显示，以使其更加无缝。