--- title: MediaSource.addSourceBuffer() slug: Web/API/MediaSource/addSourceBuffer translation_of: Web/API/MediaSource/addSourceBuffer ---
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

{{domxref("MediaSource")}} 的 addSourceBuffer() 方法会根据给定的 MIME 类型创建一个新的 {{domxref("SourceBuffer")}} 对象，然后会将它追加到 MediaSource 的 {{domxref("SourceBuffers")}} 列表中。

语法

var sourceBuffer = mediaSource.addSourceBuffer(mimeType);

参数

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

返回

一个 {{domxref("SourceBuffer")}} 对象。

错误（ Errors ）

下面的错误可能会在调用该方法时被抛出。

Error Explanation
InvalidAccessError 提交的 mimeType 是一个空字符串。
InvalidStateError {{domxref("MediaSource.readyState")}} 的值不等于 open.
NotSupportedError 当前浏览器不支持你提交的 mimeType , 或者 it is not compatible with the mimeTypes specified for the {{domxref("SourceBuffer")}} objects that already exist in {{domxref("MediaSource.sourceBuffers")}}.
QuotaExceededError The user agent can't handle any more SourceBuffer objects, or creating a SourceBuffer based on this mimeType would result in an unsupported SourceBuffer configuration.

Example

The following snippet is from a simple example written by Nick Desaulniers (view the full demo live, or download the source for further investigation.)

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

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var 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);
}

function sourceOpen (_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

Specifications

Specification Status Comment
{{SpecName('Media Source Extensions', '#widl-MediaSource-addSourceBuffer-SourceBuffer-DOMString-type', 'addSourceBuffer()')}} {{Spec2('Media Source Extensions')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 23 {{CompatVersionUnknown}} {{CompatGeckoDesktop("25.0")}}[1]
{{CompatGeckoDesktop("42.0")}}		 11[2] 15 8
Feature Android Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4.4 {{CompatVersionUnknown}}

{{CompatNo}}

 {{CompatNo}} 11 30 {{CompatNo}}

[1] Available after switching the about:config preference media.mediasource.enabled to true. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.

[2] Only works on Windows 8+.

See also