HTML5 循环播放视频卡顿

Question

我的网站上有一个简单的 HTML5 视频。我想让它循环，所以我给它添加了 loop 标签。它有效，问题是它每次重新启动时都会断断续续。视频很短，只有8秒，但是播放到最后，再重新开始，视频的第一帧"freezes"大约半秒。我在 Chrome 和 Firefox 上测试了它，它只发生在 Chrome.

在 google 之后，我找到了几个解决方法，但其中 none 对我有用。我试图在 JS 中捕获视频的 ended 事件，所以我再次 play 视频，在开始播放时清除视频的海报图像 $video.attr('poster', '')，等等。

如果我在 Windows 媒体播放器或任何其他打开 "repeat" 模式的视频播放器上播放视频，它循环播放时没有任何卡顿，所以我认为与视频无关编码。

<video loop>
    <source src="myvid.mp4" type="video/mp4">
</video>

Answer 1

在尝试优化我的视频大小时，我发现了 Handbrake，一款视频编辑软件。用这个软件优化我的视频大小后，它从 1.4MB 变成了 272KB，卡顿现象神奇地消失了。

所以归根结底，它确实是关于视频编码的，或者与之相关的东西。

对于那些从 google 来到这里并且已经尝试过在其他堆栈问题中针对此问题建议的许多解决方法的人，请尝试使用 Handbrake 优化您的视频，我希望您的 "stutter" 消失.

Answer 2

在我自己尝试循环播放 Ken Burns 的无缝剪辑作为英雄单位的背景时，我也运行遇到了莫名其妙的口吃问题。事实证明，loop 属性在许多浏览器中并没有很好地实现，通常在恢复播放之前给我半秒到整秒的暂停时间。为了纠正这个问题，我必须实现自己的循环行为：

document.querySelector('video').addEventListener('ended', function(e) {
    e.target.currentTime = 0;
    e.target.play();
}, false);

这在测试中速度足够快，看起来实际上是无缝的。复杂的流编码（例如使用前瞻帧或其他非基线功能）只会加剧这个整体问题。始终确保导出视频 "for the web" / "streaming"，这会禁用这些不兼容的功能。

HTML5 循环播放视频卡顿

HTML5 video stutter on loop

html

javascript

video

html5-video