SourceBuffer

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

注意：此功能在专用 Web Workers 中可用。

SourceBuffer 接口代表要通过 MediaSource 对象传递给 HTMLMediaElement 并播放的媒体块。这可以由一个或多个媒体片段组成。

实例属性

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，该 Promise 在缓冲区被追加后 fulfilled。
SourceBuffer.changeType(): 更改未来对 appendBuffer() 的调用所期望的新数据遵循的 MIME 类型。
SourceBuffer.remove(): 从 SourceBuffer 中删除特定时间范围内的媒体片段。
SourceBuffer.removeAsync() 非标准实验性: 开始异步从 SourceBuffer 中删除指定范围内媒体片段的过程。返回一个 Promise，该 Promise 在所有匹配的片段都被删除后 fulfilled。

事件

abort: 当缓冲区追加被中止时触发，因为在 SourceBuffer.appendBuffer() 算法仍在运行时调用了 SourceBuffer.abort() 或 MediaSource.removeSourceBuffer() 方法。SourceBuffer.updating 从 true 变为 false。
error: 当在处理 appendBuffer() 操作时发生错误时触发。SourceBuffer.updating 从 true 变为 false。
update: 每当 SourceBuffer.appendBuffer() 或 SourceBuffer.remove() 完成时触发。SourceBuffer.updating 从 true 变为 false。
updateend: 在 appendBuffer() 或 remove() 操作（无论是否成功）完成之后触发。此事件在 update、error 或 abort 事件之后触发。
updatestart: 当 appendBuffer() 或 remove() 操作开始时触发。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 sourceBuffer = this.addSourceBuffer(mimeCodec);
  const response = await fetch(assetURL);
  const buffer = await response.arrayBuffer();
  sourceBuffer.addEventListener("updateend", () => {
    this.endOfStream();
    video.play();
    console.log(this.readyState); // ended
  });
  sourceBuffer.appendBuffer(buffer);
}

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

规范

规范
Media Source Extensions™ # sourcebuffer

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年9月29日⁩ 17:26:44，由 MDN 贡献者进行了编辑。

在 GitHub 上查看此页面 • 报告此内容的某个问题