Experimental: 这是一个实验中的功能

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 (en-US).
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! (en-US)
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