If you look at youtube.com, then the url of any video looks like this: blob:https://www.youtube.com/17c9289e-4450-4ea0-a0bd-56570172d62a . This suggests that the video was loaded as a binary object and processed by the window.URL.createObjectURL() function.

I do not understand how they do it with the entire video, because it is large, and the video url does not change until the end of the playback time (if the player did not decide to change the quality or the server).

The question is how to upload videos to the client in the form of Blob as youtube.com does.

  • Possible duplicate question: Intermediate file download - D-side
  • @ D-side, these are different things, you wrote there about the full download of the binaries, streaming takes place here. I quote you: "The blob exists exclusively on the client, and if it exists, it is already completely," but the video starts to appear much earlier than the moment of full download. - Rolandius
  • Fair enough. The voice has withdrawn. But the decision is somewhere close, so leave a link. - D-side
  • In general, I re-read the MDN on the topic, and I get the impression that I’ve been somewhat wrong in the answer about the fact that Blob must be already loaded to make a URL out of it. The list of events in the panel on the left is suspicious. But until I conduct / see an experiment, I don’t dare to say anything: perhaps it’s just a mistake. - D-side
  • one
    And ... how about MediaSource ? - D-side

1 answer 1

D-side, prompted to look in the direction of MediaSource . This object allows you to set the video object's url as window.URL.createObjectURL(mediaSource) . This allows you to set the source as a Blob, but with one important property: we can reload data into the mediaSource , for example, when receiving a continuation of video via AJAX or in some other way.

Example of working with MDN:

 var video = document.querySelector('video'); var assetURL = 'frag_bunny.mp4'; var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource; video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', mimeCodec); } function sourceOpen (_) { var mediaSource = this; var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); fetchData(assetURL, function (buf) { sourceBuffer.addEventListener('updateend', function (_) { mediaSource.endOfStream(); video.play(); }); sourceBuffer.appendBuffer(buf); }); };

The method is working, but there are some jokes, for example, 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" 'is the only Maym codec that works in both Chrome and Mozilla. If you want to work with webm: 'video / webm; codecs = "vp9, vorbis" 'in Mozilla, you will have to include the flag in about: config, which is not very pleasant for the user.