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

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

构造函数

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

属性

MediaSource.sourceBuffers 只读
返回一个SourceBufferList 对象,包含了这个MediaSource的SourceBuffer的对象列表。
MediaSource.activeSourceBuffers 只读
返回一个 SourceBufferList 对象,包含了这个MediaSource.sourceBuffers中的SourceBuffer 子集的对象—即提供当前被选中的视频轨 (video track),启用的音频轨 (audio tracks) 以及显示/隐藏的字幕轨 (text tracks) 的对象列表。
 
MediaSource.readyState 只读
返回一个包含当前MediaSource状态的集合,即使它当前没有附着到一个media元素(closed),或者已附着并准备接收SourceBuffer 对象 (open),亦或者已附着但这个流已被MediaSource.endOfStream()关闭(ended.)
MediaSource.duration
获取和设置当前正在推流媒体的持续时间。

方法

从父接口EventTarget上继承而来。

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

静态方法

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

示例

这个例子尽可能快地逐块加载视频,并在加载好后立刻播放。 这个示例是由Nick Desaulniers 编写,你可以点这里查看  (你也可以点这里下载来进一步研究)。

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.

浏览器支持情况

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

31

23 — 31 -webkit-

Yes

42

25 — 421 2

113158
MediaSource

31

23 — 31 -webkit-

Yes

42

25 — 421 2

113158
sourceBuffers

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
activeSourceBuffers

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
readyState

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
duration

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
onsourceclose53 No

42

25 — 421 2

113158
onsourceended53 No

42

25 — 421 2

113158
onsourceopen53 No

42

25 — 421 2

113158
addSourceBuffer

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
removeSourceBuffer

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
endOfStream

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
setLiveSeekableRange62 No No No49 No
clearLiveSeekableRange62 No No No49 No
isTypeSupported

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3333 Yes4130 No Yes
MediaSource3333 Yes4130 No Yes
sourceBuffers3333 Yes4130 No Yes
activeSourceBuffers3333 Yes4130 No Yes
readyState3333 Yes4130 No Yes
duration3333 Yes4130 No Yes
onsourceclose3333 Yes4130 No Yes
onsourceended3333 Yes4130 No Yes
onsourceopen3333 Yes4130 No Yes
addSourceBuffer3333 Yes4130 No Yes
removeSourceBuffer3333 Yes4130 No Yes
endOfStream3333 Yes4130 No Yes
setLiveSeekableRange6262 ? ?49 ? No
clearLiveSeekableRange6262 ? ?49 ? No
isTypeSupported3333 Yes4130 No Yes

1. Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.

2. From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.

3. Only works on Windows 8+.

See also

文档标签和贡献者

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