HTML5 视频未流式传输且需要 90 秒才能加载 [英] HTML5 video not streaming and taking 90 seconds to load

问题描述

我有一个 HTML5 视频播放器:

I have an HTML5 video player:

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

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

That seems to be working 100% in dev but in production videos can take up to 90 seconds to load. I want to figure out if the html5 player is really a streaming player or if it requires a full download first? I was informed by a coworker that setting the tag like this:

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

将 preload 选项设置为 none 或 metadata 应该强制浏览器流式传输视频而不是缓冲整个内容.我在这里有哪些选择?我应该放弃 html5 播放器吗?我的印象是 html5 播放器是在我们的 Intranet 上播放视频流的正确方式.有什么建议吗?

with the preload option to either none or metadata should force the browser to stream the video instead of buffering the entire thing. What are my options here? Should I abandon the html5 player? I was under the impression that the html5 player was the right way to do streaming video on our intranet. Any suggestions?

推荐答案

因为您必须通过公共互联网而不是本地网络移动文件，所以您需要使用诸如 ffmpeg 之类的东西来移动元数据(MOOV atom) 到视频文件的前面，以便它可以更快地开始流式传输

Because you're having to move the file over the public internet, rather than local network you'll want to use something like ffmpeg to move the meta data (MOOV atom) to the front of the video file so it can start streaming faster

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

以上内容将在 mp4 容器中使用 h264 以 3Mbps 的速度为您提供 1280x720 输出，然后将执行第二遍将 moov 元素移动到文件的前面，使其能够更快地开始流式传输(请参阅 这个答案了解更多细节.

The above will give you a 1280x720 output, at 3Mbps using h264 in an mp4 container, and will then do a second pass to move the moov element to the front of the file enabling it to start streaming faster (see this answer for some more detail).

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

You should also check that your Production server configuration matches your dev server, specifically the ability to support byte-range requests that allow more optimal streaming of content

这篇关于HTML5 视频未流式传输且需要 90 秒才能加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！