HTML5视频真的很不稳定——开发者能做什么？

带有标准标签的HTML5视频，例如：

<video>
     <source src="video/intro.mp4" type="video/mp4"/>
     <source src="video/intro.ogv" type="video/ogg"/>
     <source src="video/intro.webm" type="video/webm"/>
</video>

据报道，对于我们的一些用户来说，它的播放效果非常糟糕，主要是在Firefox和IE等浏览器中。它真的很不稳定，在一个完整的11秒视频中，以30帧/秒的速度播放通常只显示几帧。当您增大浏览器窗口的大小，从而增大视频的大小时，情况会更糟。对于某些人来说，它在第二次加载时得到改进，可能是在缓存之后

我们在11秒中的10秒之前不会播放视频，所以这不应该是缓冲问题。文件大小约为4mb。我相信它有使用H.264的标准编码。尺寸为1920x1080

作为开发人员，我们可以做些什么来改善这种体验吗？在我所有的搜索中，我只为最终用户找到建议，比如关闭硬件加速。这似乎是一个常见的问题，甚至在Youtube和Vimeo上也有很多关于质量的抱怨，但对我来说，没有代码解决方案似乎很疯狂

---

谢谢

您需要确保您的mp4文件经过优化，以实现最佳交付。。。您需要使用一些设置，但我建议确保MOOV元素位于文件的开头，以帮助浏览器快速获取足够的元数据。一旦您获得了良好的MP4体验，您就可以以同样的方式调整webm/ogv版本

我使用ffmpeg优化内容，通常是这样：

./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4

您需要使用帧大小（-s参数）和目标比特率（-b），以获得所需速度的大小和质量的正确平衡

请看一看，以获得稍微长一点的答案