这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
MediaSource
是Media 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
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome
Full support
31
| Edge Full support Yes | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
MediaSource | Chrome
Full support
31
| Edge Full support Yes | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
sourceBuffers | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
activeSourceBuffers | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
readyState | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
duration | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
onsourceclose | Chrome Full support 53 | Edge Full support 17 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
onsourceended | Chrome Full support 53 | Edge Full support 17 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
onsourceopen | Chrome Full support 53 | Edge Full support 17 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile No support No | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
addSourceBuffer | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
removeSourceBuffer | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
endOfStream | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung Internet Android Full support Yes |
setLiveSeekableRange | Chrome Full support 62 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 49 | Safari No support No | WebView Android Full support 62 | Chrome Android Full support 62 | Edge Mobile ? | Firefox Android ? | Opera Android Full support 49 | Safari iOS ? | Samsung Internet Android No support No |
clearLiveSeekableRange | Chrome Full support 62 | Edge Full support 17 | Firefox No support No | IE No support No | Opera Full support 49 | Safari No support No | WebView Android Full support 62 | Chrome Android Full support 62 | Edge Mobile ? | Firefox Android ? | Opera Android Full support 49 | Safari iOS ? | Samsung Internet Android No support No |
isTypeSupported | Chrome
Full support
31
| Edge Full support 12 | Firefox
Full support
42
| IE
Full support
11
| Opera Full support 15 | Safari Full support 8 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Edge Mobile Full support Yes | Firefox Android Full support 41 | Opera Android Full support 30 | Safari iOS No support No | Samsung 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.