What is blob in the <video src=blob:url>?

Question

Can anyone explain what the blob: indicates in the URL in this video tag?

<video class=""         style="width: 640px; height: 360px; left: 0px; top: 0px; transform: none; opacity: 1;"         src="blob:https://www.youtube.com/5c42620b-a028-451b-9b64-424996802355"> </video> 

Answer 1

That is a youtube video with shaka player which plays DASH content without browser plugins using Media Source Extensions.

The blob url is generated by createObjectURL. for example:

var video = document.querySelector('video');  var assetURL = 'frag_bunny.mp4'; // Need to be specific for Blink regarding codecs // ./mp4info frag_bunny.mp4 | grep Codec var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';  if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {   var mediaSource = new MediaSource;   //console.log(mediaSource.readyState); // closed   video.src = URL.createObjectURL(mediaSource);   mediaSource.addEventListener('sourceopen', sourceOpen); } else {   console.error('Unsupported MIME type or codec: ', mimeCodec); } 

Answer 2

It indicates that the url was created using the createObjectURL static method of the URL object .. createObjectURL takes a single parameter which should be one of either a Blob, a File, or MediaSource object, and it returns a url which represents the object given by parameter. (see MDN - URL.createObjectURL)

You can try console.log(URL.createObjectURL(new MediaSource())); in the console to demonstrate that it creates a "blob:https://...(url)...". However, you would normally set the src attribute of a video element to reference the created object url which itself is a reference to the MediaSource object. You can then fetch the stream of a video asset using XMLHttpRequest and append the response as a buffer to the MediaSource object, the exact details of which you can learn from this live demo found on https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Examples .. This allows greater control over the stream which, e.g., you could use to allow features such as playback speed and video quality adjustment.

But this is the old way of doing things from what I've read, and support will eventually be dropped from newer browsers (see "browsers are removing support for doing this"). The new way is to just set the srcObject attribute of the video element to reference the MediaSource object directly, instead of having to do the intermediate step of creating an object url using URL.createObjectURL (see MDN - srcObject attribute) ..