Загрузка видео на сайт в виде Blob

Если посмотреть на youtube.com, то url у любого видео выглядит вот так: blob:https://www.youtube.com/17c9289e-4450-4ea0-a0bd-56570172d62a. Это говорит о том, что видео было загружено в виде бинарного объекта и обработано функцией window.URL.createObjectURL().
Я не понимаю как они это делают со всем видео целиком, ведь оно большого размера, а url у видео не меняется до конца времени проигрывания (если плеер не решил поменять качество или сервер).
Вопрос заключается в том, как загружать видео на клиент в виде Blobа так, как делают это на youtube.com.

Ответ

D-side, подсказал посмотреть в сторону MediaSource. Этот объект позволяет задать url объекта video как window.URL.createObjectURL(mediaSource). Это позволяет задавать источник в виде Blob'а, но с одним важным свойством: мы можем догружать данные в mediaSource, например, при получении продолжения видео по AJAX или каким-либо другим способом.
Пример работы с 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); }); };
Метод рабочий, но есть свои приколы, например, 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' - единственный майм кодек, который работает и в Chrome и в Mozilla. Если хочется работать с webm: 'video/webm; codecs="vp9,vorbis"' в Mozilla, то придется включать флаг в about:config, что не очень приятно для пользователя.