循环播放 HTML5 视频卡顿

Question

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

在谷歌之后，我找到了几种解决方法，但没有一个对我有用。我试图ended在 JS 中捕捉视频的事件，所以我play再次观看视频，在视频开始播放时清除视频的海报图像$video.attr('poster', '')，依此类推。

如果我在 Windows Media Player 或任何其他启用“重复”模式的视频播放器上播放视频，它会循环播放而不会出现任何卡顿现象，因此我认为这与视频编码无关。

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

Answer 1

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

所以毕竟，它真的是关于视频编码，或与此相关的东西。

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