46

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>
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
kulls
  • 845
  • 2
  • 12
  • 37

3 Answers3

15

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);
}
aptx4869
  • 380
  • 3
  • 8
  • 4
    I don't understand the above code, the `assetURL` is not used at all how is blob URL translated into actual video URL? – fahadash Mar 01 '17 at 20:31
  • 6
    There seems to be a step missing here. `assetURL` is defined once and never used with `mediaSource`. All I can see happening here is a blank video. And what is the definition of `sourceOpen()`? – Braden Best Apr 18 '17 at 03:57
  • 2
    I don't think we're supposed to understand the code: YouTube evidently wants to make it as difficult as possible to access videos outside of the browser. Calling URL.createObjectURL on a string argument that happens to be a URL just puts "blob:" before it; I don't think we're supposed to know why they wanted to do that. – Silas S. Brown Oct 17 '17 at 12:12
  • 1
    @BradenBest the full example is available on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Examples – Mincong Huang Aug 04 '18 at 19:38
2

It indicates that the url was created using the URL.createObjectURL method. You can try URL.createObjectURL(new MediaSource()); in the console to demonstrate that it creates a blob url.

It seems the youtube developers have set the src attribute of the video to a blob url obtained from URL.createObjectURL, and they're likely also using the media source extensions API, which allows them to switch the quality of the video based on your connection speed.

Quinn Dirks
  • 311
  • 3
  • 7
0

A blob is a higher-level object which represents immutable raw binary data.

See examples in javascript and HTML tags

Blob intreface W3 definition

Sergei
  • 195
  • 6