Question

我的网站上有一个简单的HTML5视频。我希望它循环，所以我添加了loop标签。它的工作原理是，它每次重启时都会出现断断续续的问题。视频非常短，只有8秒，但当它到达终点，然后重新开始时，视频的第一帧就会冻结＆＃34;大概半秒钟。我在Chrome和Firefox上测试过它，它只发生在Chrome上。

google之后我找到了几个解决方法，但没有一个能为我工作。我尝试在JS中捕捉视频的ended事件，以便再次play视频，以便在视频开始播放$video.attr('poster', '')时清除视频的海报图像，依此类推。

如果我在Windows Media Player或其他任何带有＆＃34的视频播放器上播放视频，请重复＆＃34;模式打开，循环没有任何口吃，所以我认为与视频编码无关。

<video loop>
    <source src="myvid.mp4" type="video/mp4">
</video>

Answer 1

在尝试优化视频尺寸时，我找到了Handbrake，一个视频编辑软件。用这个软件优化我的视频大小后，它从1.4MB变为 272KB，神奇地断断续续地消失了。

毕竟，它实际上是关于视频编码，或与...相关的东西。

对于那些从谷歌来到这里并且已经在其他堆栈问题中尝试过针对此问题的解决方法的人，尝试使用Handbrake优化您的视频，我希望您的“口吃”消失。

Answer 2

在我尝试循环播放无缝的Ken Burns剪辑作为英雄单位的背景时，我也遇到了莫名其妙的结结问题。事实证明，在许多浏览器中，loop属性的实现不是很好，通常在恢复播放之前会给我半秒到一秒钟的暂停。为了解决这个问题，我必须实现自己的循环行为：

document.querySelector('video').addEventListener('ended', function(e) {
    e.target.currentTime = 0;
    e.target.play();
}, false);

这在测试中足够快，实际上看起来是无缝的。复杂的流编码（例如，使用超前帧或其他非基线功能）只会使整个问题复杂化。始终确保将视频“用于网络” /“流式”导出，以禁用这些不兼容的功能。

HTML5视频口吃循环

2 个答案: