这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
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
编写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
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();
};
</script>
</body>
</html>