视频 - HTML5 - 如何流式传输大型.mp4文件?

我正在尝试设置一个非常基本的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>
2个解决方案
123 votes
  1. 确保moov(元数据)位于mdat(音频/视频数据)之前。 这也称为“快速启动”或“网络优化”。 例如,Handbrake有一个“Web Optimized”复选框,ffmpeg和avconv有输出选项curl -I http://yoursite/video.mp4
  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:。

mark4o answered 2019-06-12T13:44:03Z
3 votes

这是我用来在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;
}
Chris answered 2019-06-12T13:44:38Z
translate from https://stackoverflow.com:/questions/10328401/html5-how-to-stream-large-mp4-files