为啥webkit浏览器在播放前需要下载整个html5视频（mp4）？

Posted 2023-03-05

【中文标题】为啥webkit浏览器在播放前需要下载整个html5视频（mp4）？

【英文标题】：Why do webkit browsers need to download the entire html5 video (mp4) before playing?为什么webkit浏览器在播放前需要下载整个html5视频（mp4）？

【发布时间】：2013-02-03 11:32:35

【问题描述】：

html5 视频需要很长时间才能从 Chrome/Safari（最新版本和 Chrome Canary）开始播放。似乎需要在开始播放之前下载整个视频文件。

在 Firefox 18.0.2 (HTML5) 和 IE 8,9,10 (Flash) 中，播放几乎是即时的。

在 Chrome 中，我在使用时发现了这个问题：

chrome 原生播放器 视频JShttp://videojs.com/ MediaElementJS http://mediaelementjs.com/

我发现即使在 Chrome 中打开本地 mp4 (h264) 文件也需要相当长的时间来加载：开发者网络工具显示视频正在加载/挂起，在大文件上需要 10-15 秒。

作为参考，这里有一个视频： http://mediaelementjs.com/

在开始播放之前下载完整的视频文件 (5MB)。这个小视频还不错，但是大文件就很痛苦了。

我有两个问题：

Webkit 是否支持渐进式下载/播放？ 如果没有，是否有已知的解决方法？

谢谢

【问题讨论】：

您应该确保您的视频文件采用 H.264 编码。只有这样，视频才会在完全加载之前开始播放。如果您的视频以 MPEG-4 等格式进行编码，则可能会导致加载问题。我建议您查看此链接：longtailvideo.com/support/forums/jw-player/bug-reports/20252/…

【参考方案1】：

正如 Foaster 所说，元数据块需要位于视频的早期，这样视频就不必加载到它上面（如果放在最后，可能需要加载整个视频）。

但您不需要来自产品网站的一些黑盒.exe 文件来移动元数据块。以下是如何使用旧的 ffmpeg 来做到这一点：

ffmpeg \
-i input.mp4 \
-codec copy \
-movflags faststart \
-f mp4 output.mp4

这将：

-i input.mp4：以input.mp4 作为输入。 -codec copy：按原样复制流（没有编码/解码步骤）。 -movflags faststart：将元数据块移到开头。 -f mp4 output.mp4：格式化为 MP4 文件并以名称output.mp4 输出。

链接到完整的ffmpeg 文档here。各种平台的安装说明here（Mac用户一个简单的brew install ffmpeg就足够了）。

【参考方案2】：

问题既不是编解码器也不是浏览器...

问题出在视频文件中的元块！

大多数浏览器只有在下载了元数据后才能播放视频。一些编码工具将此元块放在输出文件的末尾，因此浏览器必须加载整个文件才能“查看”元数据。

解决方案：

http://rndware.info/products/metadata-mover.html

获取这个小工具，打开您的视频，让 MetaData 移动器发挥它的魔力。

不需要那么长时间，您的文件就可以流式传输了！

【讨论】：

解决方案是指向.exe 的非现场链接，因此：1) 可能会因有一天链接失效而丢失； 2) 只能在 Windows 上运行； 3) 是一个完整的黑盒。请参阅下文，了解自己移动元数据块的简单的独立于操作系统的开源方法。

@JamieBirch : 1) 您的解决方案有更多的外部链接 2) 好点没有想到 3) 只是不......链接页面清楚地说明了它的工作原理和方式.. .但是是的，最终ffmpeg是更好的解决方案。对于不了解终端的人来说，这既不是最简单的也不是最快的；）

非常简单的解决方案。尝试了元数据移动器。使用手刹视频转换器就像魔术一样工作。 +1