MediaSource: метод addSourceBuffer()

Метод addSourceBuffer() интерфейса MediaSource создаёт новый буфер SourceBuffer заданного типа MIME и добавляет его в список буферов sourceBuffers объекта MediaSource. Новый SourceBuffer также возвращается.

mimeType

Строка, определяющая тип MIME буфера SourceBuffer, который нужно создать и добавить в MediaSource.

Объект SourceBuffer, представляющий новый буфер источника, который был создан и добавлен к источнику медиа.

InvalidAccessError DOMException

Выбрасывается, если значение, указанное для mimeType, является пустой строкой вместо допустимого типа MIME.

InvalidStateError DOMException

Выбрасывается, если MediaSource не находится в состоянии "open" readyState.

NotSupportedError DOMException

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

QuotaExceededError DOMException

Выбрасывается, если агент пользователя не может обработать больше объектов SourceBuffer, или создание нового SourceBuffer с заданным mimeType приведёт к неподдерживаемой конфигурации SourceBuffer.

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

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"';
const mediaSource = getMediaSource();

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  console.log(mediaSource.readyState); // closed
  mediaSource.addEventListener("sourceopen", sourceOpen);
  video.src = URL.createObjectURL(mediaSource);
} 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);
  });
}

• SourceBuffer
• SourceBufferList