HTML5 视频循环卡顿？答案

【问题标题】：HTML5 video stutters on loop?HTML5 视频循环卡顿？
【发布时间】：2014-04-24 17:14:50
【问题描述】：

我的页面上有一个 HTML5 视频元素，它被缩放以填充整个背景，其想法是它会在播放时循环播放。这在 Chrome 中运行良好，但 Safari 和 Firefox 在循环中出现口吃。在 Firefox 中这是一个很好的半秒。有什么想法吗？

这是我对视频播放器的标记：

<video id="vid" preload="auto" autoplay loop onended="this.play();">
  <source src="vid.mp4" type="video/mp4"/>
  <source src="vid.webm" type="video/webm"/>
</video>

我尝试了很多方法，比如完全使用 JS 控制播放，而不是依赖浏览器来解决。但总是有口吃。我不认为这是预加载的问题，因为如果我在本地执行所有操作，视频会立即加载（显然），但仍然存在相同的循环。这只是这些浏览器固有的问题吗？

我很想创建两个视频实例，并在每次完成后简单地用 JS 切换它们。这真的很脏，但我不确定我的其他选择是什么。

【问题讨论】：

您找到解决此问题的方法了吗？我也面临同样的事情。
很遗憾，没有，尽管我有一段时间没有关注它了。我环顾四周，如果您只是坐下来观看足够长的时间，我发现的大多数示例基本上都有这个问题。我发现的一个技巧是，如果您首先使用第一帧的背景图像，然后在页面加载更多后添加视频（因此您不会通过流式传输此视频来延迟页面加载），它在某种程度上更可以原谅。但除了潜在的 JS 修复（根据时间或其他东西通过 JS 重新启动它）之外，我从来没有找到一个好的解决方案。

标签： javascript html firefox video playback

【解决方案1】：

我遇到了这个问题，实际上我通过将 webm 源放在 mp4 源之前解决了这个问题。这样，它首先尝试加载 webm 视频格式，并且在我测试它时它的卡顿更少。 mp4 和 ogv 文件在 Firefox 中都有卡顿，这让我发疯了，所以当 webm 文件似乎按预期工作时，我感到很惊讶。

<video id="vid" preload="auto" autoplay loop>
  <source src="vid.webm" type="video/webm"/>
  <source src="vid.mp4" type="video/mp4"/>
</video>

【讨论】：

将此标记为正确答案。当我与之抗争时，我不确定 Firefox 是否支持 WebM。但这并不让我感到惊讶。

【解决方案2】：

我通过在编码过程中删除 .mp4 的音轨解决了这个问题。如果您需要音频，则不理想，但在我的情况下效果很好。

【讨论】：