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 切换它们。它真的很脏，但我不确定我的其他选择是什么。

Answer 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>