HTML5视频循环播放时出现卡顿？

Question

我在网页上有一个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在每个视频完成后切换它们。这很笨拙，但我不确定其他选择。

- dougoftheabaci

---

你找到了解决这个问题的方法吗？我也遇到了同样的情况。 - Pedro Estevão

很遗憾，我已经有一段时间没有关注它了。我做了一些调查，发现大多数例子都会出现这个问题，如果你坐下来看足够长的时间。我发现的一个技巧是，如果你先使用第一帧的背景图像，然后在页面加载更多后再添加视频（这样你不会通过流式传输视频延迟页面加载），在某种程度上更容易被原谅。但除了可能的JS修复（基于时间或其他因素通过JS重新启动它），我从未找到一个好的解决方案。 - dougoftheabaci

Answer 1

我通过在编码期间删除.mp4的音轨来解决了这个问题。如果你需要音频，这不是一个理想的方法，但在我的情况下效果很好。

- Patric Ryan

Answer 2

我曾经遇到过这个问题，后来通过将webm源放在mp4源之前解决了它。这样它就会首先尝试加载webm视频格式，在我测试时卡顿较少。在Firefox中，mp4和ogv文件都会出现卡顿，让我感到很烦恼，所以当webm文件似乎按预期工作时，我感到非常惊讶。

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

- Kadima

---

将此标记为正确答案。我不确定在我处理这个问题时Firefox是否支持WebM。但是如果它支持也不会让我感到惊讶。 - dougoftheabaci