HTML5视频断断续续循环

HTML5 video stutters on loop?

本文关键字：循环 断断续续 视频 HTML5      更新时间：2023-09-26

我的页面上有一个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切换它们。这会很脏，但我不确定还有什么其他选择

我通过在编码期间删除。mp4的音频轨道来解决它。如果您需要音频，则不理想，但在我的情况下它工作得很好。

我有这个问题，我实际上通过将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>
相关文章：