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

标签 javascript video html

我有一个 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 上播放流媒体视频的正确方法。有什么建议吗?

最佳答案

因为您必须通过公共(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了解更多详细信息)。

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

关于javascript - HTML5 视频无法流式传输并且需要 90 秒才能加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40836206/

相关文章:

javascript - 读取 CSV 文件 JavaScript

video - ffmpeg 流音频视频网络摄像头树莓派

html - 使用 css 设置图像标题属性的样式?

javascript - 如何使用 javascript/jquery 在前面添加多个 &nbsp

javascript - 将数据绑定(bind)到D3中的父节点而不是选择--模式

javascript - TypeScript 中对象文字的动态泛型类型推断

javascript - 将点击绑定(bind)到jquery中的div,没有子<a>的

html - 通过 iframe、vimeo 或自托管实现视频?

audio - YouTube 是否分开存储视频和音频

javascript - 事件仅在我单击同一标签时触发