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

#javascript #html #потоки_данных #youtube #blob

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

Я не понимаю как они это делают со всем видео целиком, ведь оно большого размера,
а url у видео не меняется до конца времени проигрывания (если плеер не решил поменять
качество или сервер). 

Вопрос заключается в том, как загружать видео на клиент в виде Blobа так, как делают
это на youtube.com.
    

Ответы

Ответ 1

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,
что не очень приятно для пользователя.