MediaSource - 表示 HTMLMediaElement 对象的媒体数据源

MediaSource 是 Media Source Extensions API 的接口，表示 HTMLMediaElement 对象的媒体数据源。可以将 MediaSource 对象附加到要在用户代理中播放的 HTMLMediaElement。

构造函数

MediaSource()

构造并返回一个没有关联源缓冲区的新 MediaSource 对象。

属性

MediaSource.sourceBuffers 只读

返回一个 SourceBufferList 对象，其中包含与此 MediaSource 关联的 SourceBuffer 对象的列表。

MediaSource.activeSourceBuffers 只读

返回一个 SourceBufferList 对象，其中包含 MediaSource.sourceBuffers 中包含的 SourceBuffer 对象的子集 - 提供的对象列表选定的视频轨道，启用的音轨和显示/隐藏的文本轨道。

MediaSource.readyState 只读

返回一个表示当前 MediaSource 状态的枚举，包括了它当前是否附加到媒体元素（closed），已附加并准备接收 SourceBuffer 对象（open），或已附加但流已被 MediaSource.endOfStream() 结束（ended）。

MediaSource.duration

获取并设置当前媒体的持续时间。

事件处理程序

MediaSource.onsourceclose

sourceclose 事件的事件处理程序。

MediaSource.onsourceended

sourceended 事件的事件处理程序。

MediaSource.onsourceopen

sourceopen 事件的事件处理程序。

方法

从其父接口 EventTarget 继承了方法。

MediaSource.addSourceBuffer()

创建给定 MIME 类型的新 SourceBuffer 并将其添加到 MediaSource.sourceBuffers 列表中。

MediaSource.clearLiveSeekableRange()

通过调用 setLiveSeekableRange() 清除可搜索范围的私有集。

MediaSource.endOfStream()

通知流已结束。

MediaSource.removeSourceBuffer()

从 MediaSource.sourceBuffers 列表中删除给定的 SourceBuffer。

MediaSource.setLiveSeekableRange()

设置用户可以在 media 元素中查找的范围。

静态方法

MediaSource.isTypeSupported()

返回一个 Boolean 值，指示当前用户代理是否支持给定的 MIME 类型 - 即它是否可以成功创建该 MIME 类型的 SourceBuffer 对象。

实例

以下简单实例使用 XMLHttpRequest 加载视频，并尽快播放。这个例子是由 Nick Desaulniers 编写的，可以在这里查看（你也可以下载源代码进一步查看。）

var video = document.querySelector('video');

var assetURL = 'frag_bunny.mp4';
// 需要为 Blink 指定编解码器
// ./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();
};

规范

规范	状态	备注
Media Source Extensions MediaSource 的定义	候选推荐	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 限制支持白名单中的网站，例如 YouTube，Netflix 和其他热门流媒体网站。默认情况下，在 Firefox 42 中启用了 Media Source Extensions 时，白名单会被删除。

2. 仅适用于 Windows 8+。

相关链接

• SourceBuffer
• SourceBufferList