SourceBuffer

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

SourceBuffer.appendWindowEnd

Управляет меткой времени конца окна добавления.

SourceBuffer.appendWindowStart

Управляет меткой времени начала окна добавления. Это диапазон меток времени, который может использоваться для фильтрации медиаданных, добавляемых к SourceBuffer. Кодированные кадры медиа с метками времени в этом диапазоне будут добавлены, а те, что вне диапазона, будут отфильтрованы.

SourceBuffer.audioTracks Только для чтения

Список аудиодорожек, содержащихся в настоящее время в SourceBuffer.

SourceBuffer.buffered Только для чтения

Возвращает диапазоны времени, которые в настоящее время буферизованы в SourceBuffer.

SourceBuffer.mode

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

SourceBuffer.textTracks Только для чтения Экспериментальный

Список текстовых дорожек, в настоящее время содержащихся в SourceBuffer.

SourceBuffer.timestampOffset

Управляет смещением, применяемым к меткам времени внутри медиасегментов, которые впоследствии добавляются к SourceBuffer.

SourceBuffer.updating Только для чтения

Булевое значение, указывающее, обновляется ли в настоящее время SourceBuffer — то есть, выполняется ли в настоящее время операция SourceBuffer.appendBuffer() или SourceBuffer.remove().

SourceBuffer.videoTracks Только для чтения

Список видеодорожек, содержащихся в настоящее время в SourceBuffer.

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

SourceBuffer.abort()

Прерывает текущий сегмент и сбрасывает парсер сегментов.

SourceBuffer.appendBuffer()

Добавляет данные медиасегмента из объекта ArrayBuffer, TypedArray или DataView в SourceBuffer.

SourceBuffer.appendBufferAsync() Нестандартный Экспериментальный

Запускает процесс асинхронного добавления указанного буфера в SourceBuffer. Возвращает Promise, который выполняется, как только буфер будет добавлен.

SourceBuffer.changeType()

Изменяет MIME-тип, который будущие вызовы appendBuffer() будут ожидать от новых данных.

SourceBuffer.remove()

Удаляет медиасегменты в определенном диапазоне времени из SourceBuffer.

SourceBuffer.removeAsync() Нестандартный Экспериментальный

Запускает процесс асинхронного удаления медиасегментов в указанном диапазоне из SourceBuffer. Возвращает Promise, который выполняется после удаления всех соответствующих сегментов.

abort

Срабатывает всякий раз, когда SourceBuffer.appendBuffer() завершается вызовом SourceBuffer.abort(). SourceBuffer.updating изменяется с true на false.

error

Срабатывает всякий раз, когда во время SourceBuffer.appendBuffer() возникает ошибка. SourceBuffer.updating изменяется с true на false.

update

Срабатывает всякий раз, когда SourceBuffer.appendBuffer() или SourceBuffer.remove() завершается. SourceBuffer.updating изменяется с true на false. Это событие срабатывает до updateend.

updateend

Срабатывает после завершения SourceBuffer.appendBuffer() или SourceBuffer.remove(). Это событие срабатывает после update.

updatestart

Срабатывает всякий раз, когда значение SourceBuffer.updating изменяется с false на true.

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

Полный код вы можете посмотреть на https://github.com/mdn/dom-examples/tree/main/sourcebuffer, а демо-версию попробовать на https://mdn.github.io/dom-examples/sourcebuffer/.

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

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

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

async function sourceOpen() {
  console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  const response = await fetch(assetURL);
  const buffer = await response.arrayBuffer();
  sourceBuffer.addEventListener("updateend", () => {
    mediaSource.endOfStream();
    video.play();
    console.log(mediaSource.readyState); // ended
  });
  sourceBuffer.appendBuffer(buffer);
}

const load = document.querySelector("#load");
load.addEventListener("click", loadVideo);

• MediaSource
• SourceBufferList