HTML 5 video tag range header

Question

I have a built a streaming web server for loading a video. I have also setup a simple html page with a video tag that requests the video content.

The initial request has a header like as:

Range:bytes=0-

On my server I am setting the end of the range to:

Range:bytes=0-100000

This works and the html player requests the next part of the content with the header of:

Range:bytes=100001-

Which then returns the rest of the content.

How do I get the html video tag to request the correct ranges.

Answer 1

To provide the information that the video element needs, you'll want the metadata for the frames to be at the start of the file. This is contained in the MOOV atom, and can be repositioned at the start in an MP4 video (so it's read when the file is initially opened) using something like ffmpeg. This will allow the video element to correctly request start and end points, rather than just start and hoping for the end...

./ffmpeg -y -i SourceFile.mp4 -c:a copy -c:v copy -movflags faststart DestFile.mp4

This will simply relocate the MOOV atom without any additional transcoding (the -c:a copy and -c:v copy simply copy the audio and video without change)

Answer 2

You don’t make the browser request the “correct” range. The browser requests the ranges it needs. The server must respond to the range requests it makes correctly.