MediaSource
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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状态的枚举值，即当前是否未连接到媒体元素（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 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。
const video = document.querySelector("video");
const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
const 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
const mediaSource = this;
const 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);
const xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
}
规范
| Specification |
|---|
| Media Source Extensions™ # mediasource |
浏览器兼容性
Loading…