HTML5视频无缝循环

Question

我知道这个问题已被多次询问了,我在StackOverflow上查看了它们中的每一个问题.

我只是试图在HTML5播放器中循环播放5秒的MP4视频并使其无缝连接.我已尝试过jwplayer和video.js,无论是在本地还是在网站空间,都没有.我尝试过使用"已结束"的活动; 我试过预加载/预缓冲; 我已经尝试过收听视频的最后一秒,然后寻求开始完全绕过停止/播放事件.我仍然总是看到抖动,我仍然总是看到加载图标(最新的Chrome和Firefox).

作为参考,这是我最新的video.js代码:

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
  width="640" height="480"
  data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
  var myPlayer = videojs("loop_me");
  videojs("loop_me").ready(function(){
    this.on("timeupdate", function(){
      var whereYouAt = myPlayer.currentTime();
      if (whereYouAt > 4) {
        myPlayer.currentTime(1);
      }
    });
  });
</script>

有没有人成功地做到了这一点？如果是这样,请你发一个完整的解决方案吗？我通常不会要求或想要那些,但我认为这次可能是必要的.

Answer 1

您不需要任何额外的脚本来完成这类事情。

“视频”标签具有内置循环属性，使用此属性您的视频将循环播放。

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

如果需要，您还可以添加预加载属性。如果需要，您可以在此处找到有关视频标签的更多信息：HTML 视频标签

编辑：哎呀。没有注意到另类哺乳动物在你的问题下发表评论。:)