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

最新推荐文章于 2024-12-08 21:35:51 发布

转载最新推荐文章于 2024-12-08 21:35:51 发布 · 1.2k 阅读

MDN前端技术专栏收录该内容

29 篇文章

订阅专栏

本文介绍MediaSource Extensions (MSE) API中的MediaSource接口，包括构造函数、属性及方法等，并通过一个逐块加载视频并播放的示例展示了如何使用MediaSource。

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

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>