HTML5 - How to stream large .mp4 files?

Question

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.

This post is the closest thing I've found while searching... I tried both Hand Brake and Data Go Round by neither appeared to make a difference:

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>

Answer 1

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:.

Answer 2

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