HTML5 视频未流式传输,加载需要 90 秒

HTML5 video not streaming and taking 90 seconds to load

我有一个 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>

使用 none 或元数据的预加载选项应该会强制浏览器流式传输视频,而不是缓冲整个内容。我在这里有什么选择?我应该放弃 html5 播放器吗?我的印象是 html5 播放器是在我们的 Intranet 上播放流媒体视频的正确方式。有什么建议吗?

因为您必须通过 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 元素移动到文件的前面,使其能够更快地开始流式传输(参见 了解更多详情)。

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