MediaSource.addSourceBuffer()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

MediaSourceaddSourceBuffer() 方法会根据给定的 MIME 类型创建一个新的 SourceBuffer 对象,然后会将它追加到 MediaSourceSourceBuffers 列表中。

语法

js
addSourceBuffer(mimeType)

参数

mimeType

你想创建的 source buffer 的 MIME 类型。

返回值

一个 SourceBuffer 对象。

异常

InvalidAccessError DOMException

如果 mimeType 指定的值是一个空字符串而不是有效的媒体(MIME)类型,则抛出异常。

InvalidStateError DOMException

MediaSource.readyState 的状态不是 "open",则抛出异常。

NotSupportedError DOMException

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

QuotaExceededError DOMException

如果用户代理不能处理更多的 SourceBuffer 对象,或者使用给定的 mimeType 创建了一个新的 SourceBuffer,这将导致 SourceBuffer 的配置不受支持

示例

以下片段基于 Nick Desaulniers 编写的一个简单示例(查看完整的在线演示,或者下载源代码进行进一步研究)。

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"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  const mediaSource = new MediaSource();
  //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 mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

规范

Specification
Media Source Extensions™
# dom-mediasource-addsourcebuffer

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
addSourceBuffer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

参见