MediaSource

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

MediaSource interface of the Media Source Extensions API represents a source of media data for an HTMLMediaElement object. A MediaSource object can be attached to a HTMLMediaElement to be played in the user agent.

构造函数

MediaSource()
Constructs and returns a new MediaSource object with no associated source buffers.

特性

MediaSource.sourceBuffers 只读
返回 SourceBufferList object containing the list of SourceBuffer objects associated with this MediaSource .
MediaSource.activeSourceBuffers 只读
返回 SourceBufferList object containing a subset of the SourceBuffer objects contained within MediaSource.sourceBuffers — the list of objects providing the selected video track,  enabled audio tracks, and shown/hidden text tracks.
MediaSource.readyState 只读
Returns an enum representing the state of the current MediaSource , whether it is not currently attached to a media element ( closed ), attached and ready to receive SourceBuffer objects ( open ), or attached but the stream has been ended via MediaSource.endOfStream() ( ended .)
MediaSource.duration
Gets and sets the duration of the current media being presented.

事件处理程序

MediaSource.onsourceclose
The event handler for the sourceclose 事件。
MediaSource.onsourceended
The event handler for the sourceended 事件。
MediaSource.onsourceopen
The event handler for the sourceopen 事件。

方法

Inherits methods from its parent interface, EventTarget .

MediaSource.addSourceBuffer()
创建新的 SourceBuffer of the given MIME type and adds it to the MediaSource.sourceBuffers list.
MediaSource.clearLiveSeekableRange()
Clears a seekable range previously set with a call to setLiveSeekableRange() .
MediaSource.endOfStream()
Signals the end of the stream.
MediaSource.removeSourceBuffer()
移除给定 SourceBuffer MediaSource.sourceBuffers list.
MediaSource.setLiveSeekableRange()
Sets the range that the user can seek to in the media element.

静态方法

MediaSource.isTypeSupported()
返回 Boolean value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create SourceBuffer objects for that MIME type.

范例

The following simple example loads a video with XMLHttpRequest , playing it as soon as it can. 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();
};
					

规范

规范 状态 Comment
媒体源扩展
The definition of 'MediaSource' in that specification.
Recommendation 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
MediaSource
Chrome 31
31
23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11 Opera 18
18
15 — 18
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Safari 8 WebView Android 4.4.3 Chrome Android 31
31
25 — 31
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Firefox Android 41 Opera Android 18
18
14 — 18
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Safari iOS 8 Samsung Internet Android 2.0
2.0
1.5 — 2.0
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
MediaSource() 构造函数
Chrome 31
31
23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 2.0
activeSourceBuffers
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5
addSourceBuffer
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5
clearLiveSeekableRange
Chrome 62 Edge 17 Firefox 不支持 No IE 不支持 No Opera 49 Safari 不支持 No WebView Android 62 Chrome Android 62 Firefox Android ? Opera Android 46 Safari iOS 不支持 No Samsung Internet Android 8.0
duration
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5
endOfStream
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5
isTypeSupported
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5
onsourceclose
Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 2.0
onsourceended
Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 2.0
onsourceopen
Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 2.0
readyState
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 2.0
removeSourceBuffer
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5
setLiveSeekableRange
Chrome 62 Edge 17 Firefox 不支持 No IE 不支持 No Opera 49 Safari 不支持 No WebView Android 62 Chrome Android 62 Firefox Android ? Opera Android 46 Safari iOS 不支持 No Samsung Internet Android 8.0
sourceBuffers
Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation 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 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 41 Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 1.5

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅