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


var sourceBuffer = mediaSource.addSourceBuffer(mimeType);


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


一个 SourceBuffer 对象。

错误( Errors )


Error Explanation
InvalidAccessError 提交的 mimeType 是一个空字符串。
InvalidStateError MediaSource.readyState 的值不等于 open.
NotSupportedError 当前浏览器不支持你提交的 mimeType , 或者 it is not compatible with the mimeTypes specified for the SourceBuffer objects that already exist in 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.


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 (_) {
      //console.log(mediaSource.readyState); // ended


Specification Status Comment
Media Source Extensions
Recommendation Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 23 (Yes) 25.0 (25.0)[1]
42.0 (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 (Yes)


未实现 11 30 未实现

[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