HTML5视频无缝循环 [英] HTML5 Video Seamless Looping

问题描述

我知道这个问题已被多次询问，我在StackOverflow上查看了每一个问题。

I know this question has been asked a number of times, and I've looked through every single one of them here on StackOverflow.

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

I'm simply trying to loop a 5 second MP4 video in an HTML5 player and have it be seamless. I've tried both jwplayer and video.js, both locally and on webspace, and neither do the trick. I've tried using the "ended" events; I've tried preloading/prebuffering; I've tried listening for the final second of a video and then seeking to the beginning to bypass the stop/play events entirely. I still always see jitter, and I still always see the loading icon (latest Chrome & Firefox).

作为参考，这里是我最新的video.js代码：

For reference, here's some of my latest code for 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>

有没有人设法成功完成此操作？如果是这样，您能否发布一个完整的解决方案？我通常不会要求或想要那些，但我认为这次可能是必要的。

Has anyone managed to do this successfully? And, if so, could you please post a complete solution? I don't normally ask for or want those, but I think it might be necessary this time.

推荐答案

你没有需要任何额外的脚本用于那种东西。

You don't need any extra scripts for that kind of stuff.

视频标签内置了循环属性，使用此属性，你的视频将循环播放。

The "video" tag has built in loop attribute, use this and your video will loop.

<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>

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

You can also add preload attribute if you wanted to. If you want, you can find more information about the video tag here: HTML video Tag

编辑：哎呀。没有注意到Offbeatmammals在您的问题下发表评论。 ：）

Oops. Didn't notice Offbeatmammals comment under your question. :)

这篇关于HTML5视频无缝循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！