Javascript 视频 blob 和渐进式下载

Question

Trying to switch my video streaming web application from using classic <video src="http://myserver/video.mp4"> with URL to blobs to avoid a full download on a simple Ctrl+s on the page.

Use of XMLHttpRequest seems mandatory to allow creating the blob from the distant video file.

Problem is XMLHttpRequest download the whole file, which is not usable for progressive download use.

Following code is the simpliest example to load a blob from a distant file.

var r = new XMLHttpRequest();
r.onload = function() { // Triggered only when all video is downloaded
    video.prop("src", URL.createObjectURL(r.response));
};

r.open("GET", "http://myserver/video.mp4");
r.responseType = "blob";
r.send();

As the application is for video stream, this method is not usable (unless we want the user to wait X minutes to download the whole file, which is not streaming at all).

Is there any way to combine blob with progressive download ?

Answer 1

When using just the src="foo.mp4" method, progressive download should be the default behavior in the browser. However, the playback experience is dependent upon the actual format of the file.

"Normal" MP4 files are not designed for streaming. They are structured such that the data needed to start playback may be split between the start and end of the file. A player may thus need to buffer the whole thing to get the data it needs to start playing.

You could try converting the normal MP4 to a fragmented MP4 using a tool like MP4Box , specifying the "-frag" option. This rearranges the data in the file so that all the initialization data is at the front and the rest of the file is broken into chunks.

A more complex option is to use something like MPEG-DASH. By leveraging MP4Box and dash.js , you can setup a fully fledged adaptive streaming media player.