MDN之Web API 接口参考(五)【MediaSource】

Love The Way You Lie 2021-06-26 16:06 530阅读 0赞

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

`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>