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

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