96

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>

2 Answers 2

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

14
  • I haven't found a good answer online... is there an application or easy way to check the moov metadata and its location in the file?
    – longda
    Jun 19, 2014 at 0:27
  • 3
    @longda: command line utilities that can show the mp4 file structure include L-SMASH boxdumper, Atomic Parsley -T, and mp4v2 mp4file --dump.
    – mark4o
    Jun 30, 2014 at 11:29
  • 3
    For the record (mainly because I'm an idiot), you call via command line like so: atomicparsley <filename> -T (the options go at the very end). Thanks again for all the help @mark4o!
    – longda
    Jun 30, 2014 at 18:52
  • 1
    @Matheretter: "fast start" or "web optimized" just means that the moov is at the beginning rather than the end, which allows seeking using byte range requests before the whole file is downloaded. If this causes seeking to not work then check for a bug in your code that is handling the byte range requests, which would not be used if the moov is at the end (by the time it knew which bytes it needed it would have already downloaded the whole file). I see in your other question that you have written custom php code for this.
    – mark4o
    Jul 13, 2015 at 5:53
  • 1
    Do you have a reference for this?
    – 0xcaff
    May 31, 2016 at 1:26
10

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;
}
1
  • 2
    This answer is simple and handles very simple streaming. Works perfectly Dec 14, 2016 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.