javascript - HTML5 视频无法流式传输并且需要 90 秒才能加载

Question

我有一个 HTML5 视频播放器:

<video width="800" height="475" id ="video" controls="" src="" autoplay></video>

这在开发中似乎 100% 有效，但在生产中视频可能需要长达 90 秒的加载时间。我想弄清楚 html5 播放器是否真的是一个流媒体播放器，还是需要先完整下载？一位同事告诉我，设置标签如下:

<video width="800" height="475" id ="video" controls="" src="" preload="none" autoplay></video>

将预加载选项设置为“无”或“元数据”应强制浏览器流式传输视频，而不是缓冲整个内容。我在这里有什么选择？我应该放弃html5播放器吗？我的印象是 html5 播放器是在我们的 Intranet 上播放流媒体视频的正确方法。有什么建议吗？

Answer 1

因为您必须通过公共(public)互联网而不是本地网络移动文件，所以您需要使用 ffmpeg 之类的工具将元数据(MOOV 原子)移动到视频文件的前面，以便它可以启动流媒体速度更快

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

上面的代码将为您提供 1280x720 输出，在 mp4 容器中使用 h264 以 3Mbps 的速度输出，然后执行第二遍将 moov 元素移动到文件的前面，使其能够更快地开始流式传输(请参阅 this answer了解更多详细信息)。

您还应该检查您的生产服务器配置是否与您的开发服务器匹配，特别是支持字节范围请求的能力，从而允许更优化的内容流