SourceBuffer

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()

更改对 appendBuffer() 的未来调用将预期新数据符合的 MIME 类型。

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