HTML5视频断断续续 [英] HTML5 video stutter on loop

问题描述

我的网站上有一个简单的HTML5视频.我希望它循环播放，所以我添加了loop标记.它有效，问题在于每次重新启动时都会结结巴巴.视频非常短，只有8秒，但是当它到达末尾然后重新启动时，视频的第一帧会冻结"大约半秒.我已经在Chrome和Firefox上对其进行了测试，但只能在Chrome上进行.

I have a simple HTML5 video on my website. I want it to loop so I added loop tag to it. It works, the problem is that it stutters everytime it restarts. The video is very short, has only 8 seconds, but when it reaches the end, and then restarts, the very first frame of the video "freezes" about half of a second. I tested it on Chrome and on Firefox, it only happens on Chrome.

在google之后，我发现了几种解决方法，但是没有一种对我有用.我试图在JS中捕获视频的ended事件，所以我再次play视频，以在开始播放$video.attr('poster', '')时清除视频的海报图像，依此类推.

After google it I found several workarounds, but none of them worked for me. I tried to catch the ended event of the video in JS so I play the video again, to clear the poster image of the video when it starts to play $video.attr('poster', ''), and so on.

如果我在Windows Media Player或任何其他启用了重复"模式的视频播放器上播放视频，它会循环播放而不会出现卡顿现象，因此我认为与视频编码无关.

If I play the video on Windows Media Player or any other video player with "repeat" mode on, it loops without any stutter, so I don't think is something related with the video encoding.

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

推荐答案

在尝试优化视频尺寸时，我发现了手刹，一个视频编辑器软件.使用该软件优化视频大小后，它的大小从1.4MB变为了 272KB，神奇的是口吃不见了.

When trying to optimize my video size, I found Handbrake, a video editor software. After optimize my video size with this software, it gone from 1.4MB to 272KB, and magically the stutter disappeared.

所以毕竟，这实际上是关于视频编码或与之相关的东西.

So after all, it really was about video encoding, or something related with.

对于那些来自google的人，已经尝试过其他堆栈问题中针对此问题建议的许多解决方法，请尝试使用Handbrake优化视频，希望您的口吃"消失.

For those who came here from google and have already tried the many workarounds suggested to this problem in other stack questions, try to optimize your video with Handbrake and I hope your "stutter" goes away.

这篇关于HTML5视频断断续续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！