Understanding blob url video streaming

Question

Many video stream websites, youtube for example, seem to have a blob url as their video source. Searching, I couldn't figure out how this works. For example...

<video src="blob:https://www.youtube.com/ea375257-e9a8-4c3f-9cef-d8cf0f3ae53f"></video>

URL.createObjectURL(), the only way to get a blob url, takes in a File, Blob, or MediaSource object. Since the video is being streamed new data has to added constantly, and File and Blob don't seem to have that option, while MediaSource does, but is marked as an experimental feature on developer.mozilla.org...

My question is how does this process, of streaming video through a blob url, work?

Weddle

Answer 1

I found this article which explains this process...

medium article about web streaming

Here is the answer but read the article if you want to go more in-depth.

Having variable bit rate or just streaming video requires constantly adding new video data, which does indeed rule out File, or Blob object which do not have that capability. MediaSource, which for some reason is marked as experimental on developer.mozilla.org, is actually the technology used in this type of case, by video streaming services. URL.createObjectURL() is simply used to get a blob url pointing to the MediaSource object.

Then Source Buffers are used to feed data to the MediaSource. Multiple buffers can be utilized for having things like separate audio and video. The important thing is that a SourceBuffer object includes functions to append new data called media segments. This key part allows the loading of videos in parts and appending the segments to the video data. For things like variable bit rate (multiple resolutions), or multiple languages it is a matter of choosing and loading a certain resolution/clip/audio and appending it to the video data.

Weddle