Javascript video blob and progressive download

Question

Trying to switch my video streaming web application using the classic <video src="http://myserver/video.mp4"> with the url on blobs to avoid completely loading simple Ctrl + s on the page.

Using XMLHttpRequest seems mandatory to allow the creation of blob from a remote video file.

The problem is that XMLHttpRequest downloads the entire file, which cannot be used to gradually use the download.

The following code is the simplest example for loading a blob from a remote 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 an application for a video stream, this method is not used (if we do not want the user to wait X minutes to download the entire file, which is not broadcast at all).

Is there a way to combine blob with progressive loading?

Answer 1

When using only the src = "foo.mp4" method, progressive download should be the default in the browser. However, playback experience depends on the actual file format.

“Normal” MP4 files are not intended for streaming. They are structured so that the data needed to start playback can be shared between the beginning and end of the file. Thus, the player may need to buffer all of this to get the data he needs.

You can try converting regular MP4 to fragmented MP4 with a tool such as MP4Box by specifying the -frag option. This reorders the data in the file so that all initialization data is in front and the rest of the file is broken into pieces.

A more complicated option is to use something like MPEG-DASH. Using MP4Box and dash.js , you can configure a full adaptive streaming media player.