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

试试这个：
1）以这种方式编辑您的视频：
[1S] [2S] [3S] [4S] [5S]
剪切视频的第一个第二块并将其附加到最后，如下所示：
[2S] [3S] [4S] [5S] [1秒] [1秒]

2）使用代码：

<video id="vid"  width="100" height="50" loop autoplay preload="true">
    <source src="something.mp4" type="video/mp4">
</video>

<!-- Goes to end of body of course -->
<script>
    var vid = document.getElementById("vid");
    vid.addEventListener("timeupdate", function () {
        if(this.currentTime >= 5.0) {
            this.currentTime = 0.0;
        }
    });
</script>

这背后的想法是使视频无缝（视频的结尾是视频的开头）。此外，您必须确保视频永远不会结束。 loop属性适用于较小的视频文件，但如果太大（在下一次循环迭代之前），您会在视频末尾看到黑色图像。基本上在视频结束之前，您正在寻求回到0.0s。

我希望有所帮助。

Answer 2

<强> Heureka！

我们在工作的地方找到了解决这个问题的实际，真实，无解决方案。它解释了多个开发人员的不一致行为。

tl; dr版本是：比特率。谁会想到？我想的是，如果使用Adobe Media Encoder，许多人使用标准值，对于高清视频通常约为10 Mbit / s。这还不够。正确的值将是 18 Mbit / s 或甚至更高。 16仍然有点janky。我无法表达这种效果如何。到目前为止，我已经尝试了最混乱的解决方法大约五个小时，直到我和我们的视频编辑器一起找到它。

我希望这可以帮助每个人并为您节省大量时间！

Answer 3

Doozerman和Offbeatmammal是正确的：在HTML5中循环播放视频不需要Javascript。
关于每次迭代前的暂停：在某些浏览器中，我们也可以在测试中观察循环结束时的暂停。例如，在内联的22秒演示视频中...... http://www.externaldesign.com/Marlin-Ouverson.html

...在OS X下，我们看到~0.5秒。在循环重复之前暂停 - 仅在Firefox和Safari中; Chrome和Opera都在没有明显暂停的情况下播放循环。但请注意：对于台式机/笔记本电脑浏览器，上面的页面提供了一个添加的全屏背景视频，似乎在上述浏览器的所有四个中没有暂停循环。

Answer 4

你不需要为这类东西添加任何额外的脚本。

“video”标记内置了循环属性，使用此属性，您的视频将循环显示。

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

编辑：哎呀。没有注意到Offbeatmammals根据你的问题发表评论。：）

HTML5视频无缝循环

4 个答案: