HTML5-如何流大型的.mp4文件？

我试图设置一个非常基本的 html5页面，加载一个。MP4视频，大小为20MB。看起来浏览器需要下载整个视频，而不是仅仅播放视频的第一部分，然后在其余部分进行流媒体播放。

这篇文章 是我在搜索中发现的最接近的东西... ... 我尝试了手刹和数据转圈，但都没有效果:

有什么办法或者可行的办法吗？

下面是我使用的代码:

<video controls="controls">
<source src="/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
105097 次浏览
小开
最佳答案
  1. Ensure that the moov (metadata) is before the mdat (audio/video data). This is also called "fast start" or "web optimized". For example, Handbrake has a "Web Optimized" checkbox, and ffmpeg and avconv have the output option -movflags faststart.
  2. Ensure that your web server is reporting the correct Content-Type (video/mp4).
  3. Ensure that your web server is configured to serve byte range requests.
  4. Ensure that your web server is not applying gzip or deflate compression on top of the compression in the mp4 file.

You can check the headers being sent by your web server using curl -I http://yoursite/video.mp4 or 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/mp4 and Accept-Ranges: bytes, and no Content-Encoding:.

小开

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.

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;
}

提交答案