HTML5 video: Modify http range request headers

Question

I have a html5 video player (video -tag). When the page loads it will send request to video file.

Is it possible to modify the http request headers Range field? (see the screenshot, between 2 red lines)

Range: bytes=0- will download whole video and I would like to limit it to "Range: bytes=0-1000000" for example

Video file is hosted on CDN, so I cant do anything on serverside.

Answer 1

You could send a range request with a XMLHttpRequest! and get a blob file on window.URL.createObjectURL, if the server 'Accept-Range: Bytes'. The video tag provides you with a lot of events and properties, so you always know what is buffered and where you are. Even though the user clicked the progress bar, pause or stop button. Because the video properties are time based compared to byte range you need some additional information from the video file called video metadata. I'd played with Yamdi to get a xml file of played time to file seek position ratio and to set the metadata at the beginning for a .flv.

On server side read the range header (bytes=number1-number2...), open the video file, seek to number1, print (number2-number1+1) bytes and send some specific headers: Content-Type, Content-Disposition, HTTP/1.1 206 Partial Content, Content-Range.

You should follow the seek position. The length is up to you.