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

Question

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

这篇文章是我在搜索时发现的最接近的东西...我尝试了手刹和数据转轮，似乎都没有什么区别：

关于如何做到这一点或是否可能有什么想法？

这是我正在使用的代码：

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

Answer 1

1. 确保

   moov

   （元数据）位于

   mdat

   （音频/视频数据）之前。 这也称为“快速启动”或“网络优化”。 例如，Handbrake 有一个“Web Optimized”复选框，ffmpeg 有输出选项

   -movflags faststart

   。
2. 确保您的网络服务器报告正确的内容类型（视频/mp4）。
3. 确保您的 Web 服务器配置为服务字节范围请求。
4. 确保您的 Web 服务器未在 mp4 文件中的压缩之上应用 gzip 或 deflate 压缩。

您可以使用

curl -I http://yoursite/video.mp4

或使用浏览器中的开发人员工具（Chrome、Firefox）检查网络服务器发送的标头（如果页面已缓存，请重新加载页面）。 HTTP 响应标头应包含 Content-Type: video/mp4 和 Accept-Ranges: bytes，并且不包含 Content-Encoding:。

Answer 2

这是我用来在 C# (MVC) 中创建 Web API 控制器的解决方案，该控制器将提供具有字节范围（部分请求）的视频文件。 部分请求允许浏览器仅下载播放所需的视频，而不是下载整个视频。 这使得它更加高效。

请注意，这仅适用于最新版本。

var stream = new FileStream(videoFilename, FileMode.Open, FileAccess.Read , FileShare.Read);

var mediaType = MediaTypeHeaderValue.Parse($"video/{videoFormat}");

if (Request.Headers.Range != null)
{
    try
    {
        var partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
        partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, mediaType);

        return partialResponse;
    }
    catch (InvalidByteRangeException invalidByteRangeException)
    {
        return Request.CreateErrorResponse(invalidByteRangeException);
    }
}
else
{
    // If it is not a range request we just send the whole thing as normal
    var fullResponse = Request.CreateResponse(HttpStatusCode.OK);

    fullResponse.Content = new StreamContent(stream);
    fullResponse.Content.Headers.ContentType = mediaType;

    return fullResponse;
}

Answer 3

在为您的网站选择最佳视频播放器时，HTML5 播放器通常比 Flash 更受青睐，因为它具有更好的性能、安全性以及与现代 Web 标准的兼容性。在各种可用的 HTML5 视频播放器中，我强烈推荐 sopplayer。 sopplayer 是 GitHub 上提供的开源 HTML5 视频播放器，它为将网络视频集成到您的网站提供无缝且功能丰富的体验。以下是 sopplayer 脱颖而出的一些原因：

1. 易于集成：sopplayer 的设计考虑到了简单性。它附带清晰的文档和示例，帮助您快速将其集成到您的网站中。
2. 可定制：播放器是高度可定制的，允许您调整外观和行为以符合您网站的设计和功能要求。您可以轻松修改 CSS 和 JavaScript 以满足您的需求。
3. 轻量级和高效：它的设计是轻量级的，确保快速加载时间和流畅播放，这对于保持良好的用户体验和 SEO 性能至关重要。
4. 响应式设计：sopplayer 具有完全响应式功能，非常适合需要在各种设备和屏幕尺寸上提供一致观看体验的网站。
5. 全面的功能：尽管是轻量级的，sopplayer 并没有在功能上妥协。它支持基本的视频播放功能，如字幕、自定义控件和播放列表管理。
6. 积极的开发和社区支持：作为 GitHub 上的开源项目，sopplayer 受益于积极的开发和社区贡献。这可确保播放器始终了解最新的网络标准和用户需求。 您可以在 [GitHub 存储库](GitHub - SH20RAJ/Sopplayer：Sopplayer - HTML5 时尚视频播放器 (https://github.com/SH20RAJ/sopplayer)) 上查看 sopplayer 并探索其功能和文档。 改用 sopplayer 可以增强网站的视频播放体验，使其成为 HTML5 视频播放器的首选。尝试一下，看看它能带来什么改变！