Html HTML5 - 如何流式传输大型 .mp4 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10328401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 - How to stream large .mp4 files?
提问by longda
I'm trying to setup a very basic html5 page that loads a .mp4 video that is 20MB. It appears that the browser needs to download the entire thing rather than just playing the first part of the video and streaming in the rest.
我正在尝试设置一个非常基本的 html5 页面，该页面加载 20MB 的 .mp4 视频。似乎浏览器需要下载整个内容，而不仅仅是播放视频的第一部分并在其余部分进行流式传输。
This postis the closest thing I've found while searching... I tried both Hand Brake and Data Go Round by neither appeared to make a difference:
这篇文章是我在搜索时发现的最接近的东西......我尝试了 Hand Brake 和 Data Go Round 两者似乎都没有什么不同：
Any ideas on how to do this or if it's possible?
关于如何做到这一点或是否可能有任何想法？
Here is the code I'm using:
这是我正在使用的代码：
<video controls="controls">
<source src="/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
回答by mark4o
- Ensure that the
moov(metadata) is before themdat(audio/video data). This is also called "fast start" or "web optimized". For example, Handbrake has a "Web Optimized" checkbox, and ffmpegand avconvhave the output option-movflags faststart. - Ensure that your web server is reporting the correct Content-Type (video/mp4).
- Ensure that your web server is configured to serve byte range requests.
- Ensure that your web server is not applying gzip or deflate compression on top of the compression in the mp4 file.
- 确保
moov(metadata) 在mdat(audio/video data) 之前。这也称为“快速启动”或“网络优化”。例如，Handbrake 有一个“Web Optimized”复选框，而ffmpeg和avconv有输出选项-movflags faststart。 - 确保您的网络服务器报告正确的内容类型（视频/mp4）。
- 确保您的网络服务器配置为服务字节范围请求。
- 确保您的 Web 服务器没有在 mp4 文件中的压缩之上应用 gzip 或 deflate 压缩。
You can check the headers being sent by your web server using curl -I http://yoursite/video.mp4or using the developer tools in your browser (Chrome, Firefox) (reload the page if it is cached). The HTTP Response Header should include Content-Type: video/mp4and Accept-Ranges: bytes, and no Content-Encoding:.
您可以使用curl -I http://yoursite/video.mp4或使用浏览器（Chrome、Firefox）中的开发人员工具检查 Web 服务器发送的标头（如果页面被缓存，则重新加载页面）。HTTP 响应头应该包括Content-Type: video/mp4和Accept-Ranges: bytes，没有Content-Encoding:。
回答by Chris
Here is the solution I used to create a Web API Controller in C# (MVC) that will serve video files with Byte Ranges (partial requests). Partial requests allow a browser to only download as much of the video as it needs to play rather than downloading the entire video. This makes it far more efficient.
这是我用来在 C# (MVC) 中创建一个 Web API 控制器的解决方案，它将为具有字节范围（部分请求）的视频文件提供服务。部分请求允许浏览器只下载需要播放的视频，而不是下载整个视频。这使得它更有效率。
Note this only works in recent versions.
请注意，这仅适用于最近的版本。
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;
}
