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

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

MediaSourceMedia Source Extensions API 表示媒体资源HTMLMediaElement对象的接口。MediaSource 对象可以附着在HTMLMediaElement在客户端进行播放。

构造函数

MediaSource()
构造并且返回一个新的MediaSource的空对象(with no associated source buffers)。

属性

从父接口EventTarget上继承而来。

MediaSource.sourceBuffers 只读
返回一个SourceBufferList 对象,包含了这个MediaSource的SourceBuffer的对象列表。
MediaSource.activeSourceBuffers 只读
Returns a SourceBufferList object containing a subset of the SourceBuffer objects contained within SourceBuffers — the list of objects providing the selected video track,  enabled audio tracks, and shown/hidden text tracks.
MediaSource.readyState 只读
返回一个包含当前MediaSource状态的集合,即使它当前没有附着到一个media元素(closed),或者已附着并准备接收SourceBuffer 对象 (open),亦或者已附着但这个流已被MediaSource.endOfStream()关闭(ended.)
MediaSource.duration
Gets and sets the duration of the current media being presented.

方法

Inherits properties from its parent interface, EventTarget.

MediaSource.addSourceBuffer()
创建一个带有给定MIME类型的新的 SourceBuffer 并添加到 MediaSource 的 SourceBuffers 列表。
MediaSource.removeSourceBuffer()
删除指定的SourceBuffer 从这个MediaSource对象中的 SourceBuffers列表。
MediaSource.endOfStream()
Signals the end of the stream.

静态方法

MediaSource.isTypeSupported()
返回一个 Boolean 值表明给定的MIME类型是否被当前的浏览器——这意味着可以成功的创建这个MIME类型的SourceBuffer 对象。

Examples

这个例子尽可能快地逐块加载视频,并在加载好后立刻播放。 This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation.)

var video = document.querySelector('video');

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);
  });
};

function fetchAB (url, cb) {
  console.log(url);
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
};

说明

Specification Status Comment
Media Source Extensions
MediaSource
Recommendation Initial definition.

浏览器支持情况

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-webkit
31
(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)

41.0

41.0 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

文档标签和贡献者

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