HTML5 视频无缝循环

Posted 2023-05-07

【中文标题】HTML5 视频无缝循环

【英文标题】：HTML5 Video Seamless Looping

【发布时间】：2014-01-12 06:44:59

【问题描述】：

我知道这个问题已经被问过很多次了，我已经在 *** 上查看了每个问题。

我只是想在 html5 播放器中循环播放 5 秒的 MP4 视频并让它无缝播放。我在本地和网络空间都尝试过 jwplayer 和 video.js，但都没有成功。我试过使用“结束”事件；我试过预加载/预缓冲；我试过听视频的最后一秒，然后从头开始完全绕过停止/播放事件。我仍然总是看到抖动，而且我仍然总是看到加载图标（最新的 Chrome 和 Firefox）。

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

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
   
  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>

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

【问题讨论】：

如果您想在将播放头重置到开头时避免暂停，您可能必须使用 HTML5 的MediaSource 功能将视频作为连续流提供给视频元素 -以updates.html5rocks.com/2011/11/… 为例

d'oh .... 有时明显的工作奇迹.... loop 属性：<video id="video-loop" preload="auto" loop autoplay controls muted>

接受的答案不是无缝的jsfiddle.net/blowsie/QQTqn

如果您在真实代码中碰巧使用了poster 属性，请在视频开始播放后尝试将其删除。对我来说，这修复了 Chrome 中循环之间的闪烁，海报图像将显示几分之一秒。

【参考方案1】：

试试这个： 1) 以这种方式编辑您的视频： [1s][2s][3s][4s][5s] 剪切视频的第 1 秒块并将其 2x 附加到末尾，如下所示： [2s][3s][4s][5s][1s][1s]

2) 使用代码：

<video id="vid"    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.0 秒。

希望对你有帮助。

【讨论】：

不应该是：[1s][2s][3s][4s][5s][1s] 与您的解决方案一样，在此循环之前有视频起始帧的闪烁。

【参考方案2】：

Heureka！

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

tl;dr 版本是：比特率。谁会猜到？我想，如果您使用 Adob​​e Media Encoder，许多人会为此使用标准值，通常是 10 Mbit/s 左右的高清视频。这还不够。 正确的值应该是 18 Mbit/s 甚至更高。 16还是有点卡。 我无法表达这有多好。到目前为止，我已经尝试了大约五个小时的最混乱的解决方法，直到我和我们的视频编辑器一起找到了这个。

我希望这对每个人都有帮助，并为您节省大量时间！

【讨论】：

哦，这是我没有研究过的东西！我有大量应该循环播放的短视频，但总是感觉很奇怪，因为我们从来没有让它完美循环播放。我要看看我们的视频比特率是多少，看看我发现了什么。

我刚刚在 2、8、10、16、20、24 mbit 比特率下进行了测试，遗憾的是，虽然更高的比特率确实有帮助，但它仍然存在 :( 考虑到更高比特率的文件大小增加简单的视频（仅适用于某些旋转模型），我可能只需要循环几次序列并以较低的比特率导出：S 非常令人沮丧的问题

抱歉再回复一次，实际上唯一对我有用的是降低分辨率和比特率，这似乎可以让浏览器更好地保持缓冲 - 谁知道为什么要循环 800kb 恒定比特率视频在 2020 年仍然是一个问题

是的，现在我可以推荐的是使用 lottie，句号 (airbnb.design/lottie)。奇怪的是更高的比特率对你不起作用，对此感到抱歉：/

Necro++ 我知道这已经 7 岁了。@Merritt6616 lottie 如何用于动画/过渡 html5 视频？您介意提供说明或教程的链接吗？ Lottie 链接并没有提供有关视频转换主题的信息。谢谢！

【参考方案3】：

Doozerman 和 Offbeatmammal 是正确的：在 HTML5 中循环视频不需要 Javascript。

关于每次迭代前的暂停：在某些浏览器中，我们也可以在测试中观察到循环结束时的暂停。例如，在内嵌的 22 秒演示视频中... http://www.externaldesign.com/Marlin-Ouverson.html

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

【讨论】：

是的，但为什么该视频没有暂停？是屏幕尺寸问题吗？

如果代码正确并设置为循环，则不应该暂停 - 但 HTML5 视频仍然相对较新，因此似乎并非每个网络浏览器都在解释HTML5 标准以同样的方式。对于商业网站和高可见度内容，我们通常按照标准编码，在 OS X 和 Windows 上的许多浏览器上进行彻底测试，也许在 Linux 上，然后提出自定义代码和/或设计解决方法（可能涉及 Javascript， CSS 等）用于不表现出标准行为的浏览器。

【参考方案4】：

这类东西不需要任何额外的脚本。

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

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

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

编辑：糟糕。没有注意到您的问题下的 Offbeatmammals 评论。 :)

【讨论】：

html5 视频的循环不是无缝的 :( jsfiddle.net/blowsie/QQTqn

@Blowsie 你的小提琴实际上在 Firefox 中对我来说可以无缝播放，但在 Chrome 中它每次循环时都会显示一个加载图标。

@daveycroqet 希望 chrome 能尽快修复这个错误

你可以用画布做到这一点。这是我对此的回答：***.com/questions/34097834/…

截至 2018 年，它可以在 Chrome 和 Firefox 中无缝播放。