MediaSource

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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 状态的枚举值,即当前是否未连接到媒体元素(closed),是否已连接并准备好接收 SourceBuffer 对象(open),或者是否已连接但已通过 MediaSource.endOfStream() 结束媒体流(ended)。

MediaSource.duration

获取和设置当前正在推流媒体的持续时间。

方法

从父接口EventTarget上继承而来。

MediaSource.addSourceBuffer()

创建一个带有给定 MIME 类型的新的 SourceBuffer 并添加到 MediaSourceSourceBuffers 列表。

MediaSource.removeSourceBuffer()

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

MediaSource.endOfStream()

表示流的结束。

静态方法

MediaSource.isTypeSupported()

返回一个 Boolean 值表明给定的 MIME 类型是否被当前的浏览器支持——这意味着是否可以成功的创建这个 MIME 类型的 SourceBuffer 对象。

示例

这个例子尽可能快地逐块加载视频,并在加载好后立刻播放。以下片段基于 Nick Desaulniers 编写的一个简单示例(查看完整的在线演示,或者下载源代码进行进一步研究)。

js
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

参见