MediaSource：addSourceBuffer() 方法

addSourceBuffer() 方法是 MediaSource 接口的方法，用于创建一个新的指定 MIME 类型 的 SourceBuffer，并将其添加到 MediaSource 的 sourceBuffers 列表中。新创建的 SourceBuffer 也会被返回。

语法

js
addSourceBuffer(mimeType)

参数

mimeType

一个字符串，指定要创建并添加到 MediaSource 的 SourceBuffer 的 MIME 类型。

返回值

一个 SourceBuffer 对象，表示已创建并添加到媒体源的新源缓冲区。

异常

InvalidAccessError DOMException

如果为 mimeType 指定的值是空字符串而不是有效的 MIME 类型，则抛出此异常。

InvalidStateError DOMException

如果 MediaSource 不处于 "open" readyState 状态，则抛出此异常。

NotSupportedError DOMException

如果指定的 mimeType 不受 用户代理 支持，或者与媒体源的 sourceBuffers 列表中已包含的其他 SourceBuffer 对象的 MIME 类型不兼容，则抛出此异常。

QuotaExceededError DOMException

如果用户代理无法处理更多 SourceBuffer 对象，或者使用给定的 mimeType 创建新的 SourceBuffer 将导致 SourceBuffer 的配置不受支持，则抛出此异常。

示例

以下代码片段摘自 Nick Desaulniers 编写的简单示例（查看完整演示，或 下载源代码 以便进一步研究）。函数 getMediaSource() 在此处未定义，它返回一个 MediaSource。

js
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);
  });
}

规范

规范
媒体源扩展™
# dom-mediasource-addsourcebuffer

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅