MediaSource

Интерфейс MediaSource API расширений для источника медиаданных представляет собой источник данных медиа для объекта HTMLMediaElement. Объект MediaSource может быть присоединён к HTMLMediaElement для воспроизведения в пользовательском агенте.

MediaSource()

Создаёт и возвращает новый объект MediaSource без связанных буферов источника.

MediaSource.activeSourceBuffers Только для чтения

Возвращает объект SourceBufferList, содержащий подмножество объектов SourceBuffer, содержащихся в MediaSource.sourceBuffers — список объектов, предоставляющих выбранный видеотрек, включённые аудиотреки и показанные/скрытые текстовые треки.

MediaSource.duration

Получает и устанавливает длительность текущего воспроизводимого медиа.

MediaSource.handle Только для чтения

Внутри посвященного воркера возвращает объект MediaSourceHandle, прокси для MediaSource, который можно перенести из воркера обратно в основной поток и прикрепить к элементу медиа через свойство HTMLMediaElement.srcObject.

MediaSource.readyState Только для чтения

Возвращает перечисление, представляющее состояние текущего MediaSource, подключён ли он в данный момент к элементу медиа (closed), подключён и готов принимать объекты SourceBuffer (open), или подключён, но поток был завершён с помощью MediaSource.endOfStream() (ended).

MediaSource.sourceBuffers Только для чтения

Возвращает объект SourceBufferList, содержащий список объектов SourceBuffer, связанных с этим MediaSource.

MediaSource.canConstructInDedicatedWorker Только для чтения

Булево значение; возвращает true если поддержка воркеров MediaSource реализована, обеспечивая механизм обнаружения низкой задержки.

Наследует методы от своего родительского интерфейса EventTarget.

MediaSource.addSourceBuffer()

Создаёт новый SourceBuffer заданного типа MIME и добавляет его в список MediaSource.sourceBuffers.

MediaSource.clearLiveSeekableRange()

Очищает диапазон поиска, ранее заданный вызовом setLiveSeekableRange().

MediaSource.endOfStream()

Сигнализирует о завершении потока.

MediaSource.removeSourceBuffer()

Удаляет заданный SourceBuffer из списка MediaSource.sourceBuffers.

MediaSource.setLiveSeekableRange()

Задает диапазон, к которому пользователь может перейти в элементе медиа.

MediaSource.isTypeSupported()

Возвращает булево значение, указывающее, поддерживается ли данный тип MIME текущим пользовательским агентом — то есть, может ли он успешно создать объекты SourceBuffer для этого типа MIME.

sourceclose

Срабатывает, когда экземпляр MediaSource больше не прикреплен к элементу медиа.

sourceended

Срабатывает, когда экземпляр MediaSource всё ещё прикреплён к элементу медиа, но был вызван endOfStream().

sourceopen

Срабатывает, когда экземпляр MediaSource был открыт элементом медиа и готов к добавлению данных к объектам SourceBuffer в sourceBuffers.

Следующий простой пример загружает видео с помощью XMLHttpRequest, воспроизводя его как только это возможно. Этот пример был написан Ником ДеСолье и его можно посмотреть вживую здесь (также вы можете скачать исходный код для дальнейшего изучения). Функция getMediaSource(), которая не определена здесь, возвращает MediaSource.

const video = document.querySelector("video");

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
let mediaSource;

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  mediaSource = getMediaSource();
  console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = () => {
    cb(xhr.response);
  };
  xhr.send();
}

Свойство handle можно получить внутри выделенного воркера, а полученный объект MediaSourceHandle затем передаётся в поток, создавший воркер (в данном случае, основной поток) с помощью вызова postMessage():

// Inside dedicated worker
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// Transfer the handle to the context that created the worker
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // Await sourceopen on MediaSource before creating SourceBuffers
  // and populating them with fetched media — MediaSource won't
  // accept creation of SourceBuffers until it is attached to the
  // HTMLMediaElement and its readyState is "open"
});

В главном потоке мы получаем обработчик с помощью события message, присоединяем его к элементу <video> через его свойство HTMLMediaElement.srcObject и play видео:

worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});

• SourceBuffer
• SourceBufferList