Question

带有标准标记的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等浏览器中。它真的很不稳定，在30fps的完整11秒视频中，通常只显示几帧。当您增加浏览器窗口的大小并因此增加视频的大小时，情况会更糟。对于某些人来说，它可以在第二次加载时得到改善，大概是在缓存之后。

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

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

谢谢！

Answer 1

您需要确保您的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）来获得所需速度的大小和质量的正确平衡。

还要查看preparing mp4 file for html 5以获得更长的答案

HTML5视频真的很不稳定 - 开发人员可以做些什么？

1 个答案: