javascript - 循环播放 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，神奇地口吃消失了。

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

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