HTML5 - 如何流式传输大型 .mp4 文件？

Question

我正在尝试设置一个非常基本的 html5 页面，用于加载 20MB 的 .mp4 视频。浏览器似乎需要下载整个内容，而不是只播放视频的第一部分并在其余部分进行流式传输。

This post是我在搜索时发现的最接近的东西……我尝试了 Hand Brake 和 Data Go Round，两者似乎都没有什么不同:

关于如何执行此操作或是否可行有任何想法吗？

这是我使用的代码:

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Answer 1

1. Ensure that the moov (metadata) is before the mdat (audio/video data) .这也称为“快速启动”或“网络优化”。例如，Handbrake has a "Web Optimized" checkbox , 和 ffmpeg和 avconv具有输出选项 -movflags faststart。
2. 确保您的网络服务器报告正确的内容类型(视频/mp4)。
3. Ensure that your web server is configured to serve byte range requests .
4. 确保您的网络服务器没有在 mp4 文件的压缩之上应用 gzip 或 deflate 压缩。

您可以使用 curl -I http://yoursite/video.mp4 或使用浏览器中的开发人员工具( Chrome 、 Firefox)检查您的网络服务器发送的 header )(如果已缓存，则重新加载页面)。 HTTP 响应 header 应包括Content-Type: video/mp4 和Accept-Ranges: bytes，并且没有Content-Encoding:。 p>