MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

MediaSource.addSourceBuffer()

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

语法

var sourceBuffer = mediaSource.addSourceBuffer(mimeType);

参数

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.

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
Media Source Extensions
addSourceBuffer()
Candidate Recommendation Initial definition.

Browser compatibility

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

文档标签和贡献者

 此页面的贡献者: Shangxin
 最后编辑者: Shangxin,