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

Question

我正在尝试设置一个非常基本的html5页面来加载一个20MB的.mp4视频.看起来浏览器需要下载整个内容而不是仅仅播放视频的第一部分和其他内容的流媒体.

这篇文章是我在搜索时发现的最接近的东西......我尝试过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. 确保moov(元数据)位于mdat(音频/视频数据)之前.这也称为"快速启动"或"网络优化".例如,Handbrake有一个"Web Optimized"复选框,ffmpeg和avconv有输出选项-movflags faststart.
2. 确保您的Web服务器报告的内容类型正确(video/mp4).
3. 确保将Web服务器配置为提供字节范围请求.
4. 确保您的Web服务器没有在mp4文件中的压缩之上应用gzip或deflate压缩.

您可以使用curl -I http://yoursite/video.mp4或使用浏览器中的开发人员工具(Chrome,Firefox)检查Web服务器发送的标头(如果缓存,则重新加载页面).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;
}