javascript - 播放完整的 HTML5 视频，然后循环播放其中的一部分

Question

我正在尝试完整播放一次 8.6 秒的视频，然后无限循环播放视频的一小部分，以保持视频永无止境的错觉。到目前为止，我已经研究了 media fragments URI , 和 ended视频的事件。在结束事件监听器中设置 currentTime 属性有效，但它会使视频“闪烁”。

目前，我正在使用 timeupdate 事件监听器来更改视频接近尾声的时间 [如下所示]

elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
    elem.currentTime = 5;
    elem.play();
}
}, false);

JSFiddle here

这也有效，但视频明显暂停，然后在 5 秒处重新开始。有没有更流畅的方式来播放一次视频然后循环播放一段视频？

Answer 1

您的代码没有问题，问题出在您的 MP4 文件上!尝试使用像这个小得多的视频 ( http://www.w3schools.com/tags/movie.mp4 ) 来确认问题不在于您的代码。

那么如何才能在视频文件很大的情况下获得相同的结果呢？ 您将需要两个视频文件:

• video1 是主视频
• video2 是循环播放的视频

请记住:HTML5 视频播放和循环播放大型视频文件没有问题，因此我们将使用此方法播放视频。

在下面的示例中，我们将播放第一个视频，当它结束时，我们将执行一个函数来隐藏视频 1，然后显示/播放视频 2。 (视频 2 已设置为循环播放)

不要忘记在头脑中加载 JQuery，否则这将无法工作。

<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <object data="movie.mp4" width="1080" height="568">
    <embed width="1080" height="568" src="movie.swf">
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<video id="video2" width="1080" height="568" poster="loop.png" loop>
  <source src="loop.webm" type="video/webm">
  <source src="loop.ogg" type="video/ogg">
  <source src="loop.mp4" type="video/mp4">
  <object data="loop.mp4" width="1080" height="568">
    <embed width="1080" height="568" src="loop.swf">
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<script> 
$( "#video2" ).hide();
function run(){
   $( "#video1" ).hide();
    $( "#video2" ).show();
    document.getElementById("video2").play();
   };
</script>