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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaSource
MediaSource() constructor
activeSourceBuffers
addSourceBuffer
canConstructInDedicatedWorker static property
clearLiveSeekableRange
duration
endOfStream
handle
isTypeSupported() static method
readyState
removeSourceBuffer
setLiveSeekableRange
sourceBuffers
sourceclose event
sourceended event
sourceopen event
Available in workers
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见