MediaSource

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

MediaSourceMedia Source Extensions API 表示媒体资源 HTMLMediaElement 对象的接口。MediaSource 对象可以附着在 HTMLMediaElement 在客户端进行播放。

构造函数

MediaSource()

创建并且返回一个新的 MediaSource 的空对象(with no associated source buffers)。

属性

MediaSource.sourceBuffers 只读

返回一个 SourceBufferList 对象,包含了这个 MediaSourceSourceBuffer 的对象列表。

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 并添加到 MediaSourceSourceBuffers 列表。

MediaSource.removeSourceBuffer()

删除指定的 SourceBuffer 从这个 MediaSource 对象中的 SourceBuffers列表。

MediaSource.endOfStream()

表示流的结束。

静态方法

MediaSource.isTypeSupported()

返回一个 Boolean (en-US) 值表明给定的 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

浏览器兼容性

BCD tables only load in the browser

参见