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

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.

浏览器支持情况

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support YesFirefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
MediaSource
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support YesFirefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
sourceBuffers
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
activeSourceBuffers
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
readyState
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
duration
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
onsourceclose
Experimental
Chrome Full support 53Edge Full support 17Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
onsourceended
Experimental
Chrome Full support 53Edge Full support 17Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
onsourceopen
Experimental
Chrome Full support 53Edge Full support 17Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support 17Firefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
addSourceBuffer
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
removeSourceBuffer
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
endOfStream
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes
setLiveSeekableRange
Experimental
Chrome Full support 62Edge No support NoFirefox No support NoIE No support NoOpera Full support 49Safari No support NoWebView Android Full support 62Chrome Android Full support 62Edge Mobile ? Firefox Android ? Opera Android Full support 49Safari iOS ? Samsung Internet Android No support No
clearLiveSeekableRange
Experimental
Chrome Full support 62Edge Full support 17Firefox No support NoIE No support NoOpera Full support 49Safari No support NoWebView Android Full support 62Chrome Android Full support 62Edge Mobile ? Firefox Android ? Opera Android Full support 49Safari iOS ? Samsung Internet Android No support No
isTypeSupported
Experimental
Chrome Full support 31
Full support 31
No support 23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes 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.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android Full support 33Edge Mobile Full support YesFirefox Android Full support 41Opera Android Full support 30Safari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

文档标签和贡献者

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