SourceBuffer - 表示要传递到 HTMLMediaElement 对象中并通过 MediaSource 对象播放的媒体块

SourceBuffer 接口表示要传递到 HTMLMediaElement 对象中并通过 MediaSource 对象播放的媒体块。它可以由一个或几个媒体段组成。

属性

SourceBuffer.appendWindowEnd

控制附加窗口结束时的时间戳。

SourceBuffer.appendWindowStart

控制附加窗口开始的时间戳。它是一个时间戳范围，可用于过滤将哪些媒体数据附加到 “SourceBuffer。时间戳在此范围内的编码媒体帧将被追加，而超出范围的那些媒体帧将被滤除。

SourceBuffer.audioTracks 只读

当前包含在 SourceBuffer 中的音轨列表。

SourceBuffer.buffered 只读

返回当前在 SourceBuffer 中缓冲的时间范围。

SourceBuffer.mode

控制媒体片段在 SourceBuffer 中的顺序如何处理，是否可以以任何顺序附加，还是必须严格按照顺序进行。

SourceBuffer.textTracks 只读

当前在 SourceBuffer 中包含的文本轨道列表。

SourceBuffer.timestampOffset

控制应用于媒体段内时间戳的偏移量，该偏移量随后会附加到 SourceBuffer 中。

SourceBuffer.trackDefaults

指定在要附加到 SourceBuffer 的媒体的初始化段中没有种类，标签和 / 或语言信息可用的默认值。

SourceBuffer.updating 只读

一个布尔值，指示当前是否正在更新 SourceBuffer ，即当前正在执行 SourceBuffer.appendBuffer()，SourceBuffer.appendStream() 或 SourceBuffer.remove() 操作。

SourceBuffer.videoTracks 只读

当前包含在 SourceBuffer 中的视频轨道列表。

事件处理程序

SourceBuffer.onabort

每当调用 SourceBuffer.abort() 来结束 SourceBuffer.appendBuffer() 或 SourceBuffer.appendStream() 时触发。SourceBuffer.updating 从 true 被更改为 false。

SourceBuffer.onerror

在 SourceBuffer.appendBuffer() 或 SourceBuffer.appendStream() 期间发生错误时触发。 SourceBuffer.updating 从 true 被更改为 false。

SourceBuffer.onupdate

每当 SourceBuffer.appendBuffer() 方法或 SourceBuffer.remove() 完成时触发。SourceBuffer.updating 从 true 被更改为 false。此事件在 onupdateend 之前触发。

SourceBuffer.onupdateend

每当 SourceBuffer.appendBuffer() 方法或 SourceBuffer.remove() 结束时触发。此事件在 onupdate 之后触发。

SourceBuffer.onupdatestart

每当 SourceBuffer.updating 的值从 false 变成 true 时就会触发。

方法

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

SourceBuffer.abort()

中止当前段并重置段解析器。

SourceBuffer.appendBuffer()

将媒体片段数据从 ArrayBuffer 或 ArrayBufferView 对象追加到 SourceBuffer 中。

SourceBuffer.appendBufferAsync()

开始将指定缓冲区异步附加到 SourceBuffer 的过程。返回一个 Promise，一旦附加了缓冲区，就会解析。

SourceBuffer.appendStream()

将媒体段数据从 ReadableStream 对象追加到 SourceBuffer。

SourceBuffer.changeType()

更改将来调用 appendBuffer() 时期望新数据符合的 MIME 类型。

SourceBuffer.remove()

从 SourceBuffer 中删除特定时间范围内的媒体片段。

SourceBuffer.removeAsync()

开始从 SourceBuffer 异步删除指定范围内的媒体段的过程。返回一个 Promise，一旦所有匹配的段都被删除，就会解析。

实例

以下简单实例将尽可能快地逐块加载视频，并尽快播放。该实例由 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('不支持的 MIME 类型或编解码器：', 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 SourceBuffer 的定义	推荐	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

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

2. 仅适用于 Windows 8+。

相关链接

• MediaSource
• SourceBufferList