SourceBuffer

SourceBuffer interface represents a chunk of media to be passed into an HTMLMediaElement and played, via a MediaSource object. This can be made up of one or several media segments.

特性

SourceBuffer.appendWindowEnd
Controls the timestamp for the end of the append window.
SourceBuffer.appendWindowStart
Controls the timestamp for the start of the append window . This is a timestamp range that can be used to filter what media data is appended to the SourceBuffer . Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.
SourceBuffer.audioTracks 只读
A list of the audio tracks currently contained inside the SourceBuffer .
SourceBuffer.buffered 只读
Returns the time ranges that are currently buffered in the SourceBuffer .
SourceBuffer.mode
Controls how the order of media segments in the SourceBuffer is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence.
SourceBuffer.textTracks 只读
A list of the text tracks currently contained inside the SourceBuffer .
SourceBuffer.timestampOffset
Controls the offset applied to timestamps inside media segments that are subsequently appended to the SourceBuffer .
SourceBuffer.trackDefaults
Specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the SourceBuffer .
SourceBuffer.updating 只读
A boolean indicating whether the SourceBuffer is currently being updated — i.e. whether an SourceBuffer.appendBuffer() , SourceBuffer.appendStream() ,或 SourceBuffer.remove() operation is currently in progress.
SourceBuffer.videoTracks 只读
A list of the video tracks currently contained inside the SourceBuffer .

事件处理程序

SourceBuffer.onabort
Fired whenever SourceBuffer.appendBuffer() or SourceBuffer.appendStream() is ended by a call to SourceBuffer.abort() . SourceBuffer.updating changes from true to false .
SourceBuffer.onerror
Fired whenever an error occurs during SourceBuffer.appendBuffer() or SourceBuffer.appendStream() . SourceBuffer.updating changes from true to false .
SourceBuffer.onupdate
Fired whenever SourceBuffer.appendBuffer() method or the SourceBuffer.remove() completes. SourceBuffer.updating changes from true to false . This event is fired before onupdateend .
SourceBuffer.onupdateend
Fired whenever SourceBuffer.appendBuffer() method or the SourceBuffer.remove() has ended. This event is fired after onupdate .
SourceBuffer.onupdatestart
Fired whenever the value of SourceBuffer.updating transitions from false to true .

方法

Inherits methods from its parent interface, EventTarget .

SourceBuffer.abort()
Aborts the current segment and resets the segment parser.
SourceBuffer.appendBuffer()
Appends media segment data from an ArrayBuffer or ArrayBufferView object to the SourceBuffer .
SourceBuffer.appendBufferAsync()
Starts the process of asynchronously appending the specified buffer to the SourceBuffer . Returns a Promise which is fulfilled once the buffer has been appended.
SourceBuffer.appendStream()
Appends media segment data from a ReadableStream object to the SourceBuffer .
SourceBuffer.changeType()
Changes the MIME type that future calls to appendBuffer() will expect the new data to conform to.
SourceBuffer.remove()
Removes media segments within a specific time range from the SourceBuffer .
SourceBuffer.removeAsync()
Starts the process of asynchronously removing media segments in the specified range from the SourceBuffer . Returns a Promise which is fulfilled once all matching segments have been removed.

范例

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation.)

var video = document.querySelector('video');
var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./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();
}
					

规范

规范 状态 Comment
媒体源扩展
The definition of 'SourceBuffer' in that specification.
Recommendation 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
SourceBuffer Chrome 31
31
23 — 31
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 18
18
15 — 18
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Safari 8 WebView Android 4.4.3 Chrome Android 31
31
25 — 31
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Firefox Android 不支持 No Opera Android 18
18
14 — 18
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
Safari iOS 不支持 No Samsung Internet Android 3.0
3.0
2.0 — 3.0
Prefixed
Prefixed Implemented with the vendor prefix: WebKit
abort Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 25 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 2.0
appendBuffer Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
appendBufferAsync Chrome 不支持 No Edge 不支持 No Firefox 62
Disabled
62
Disabled
Disabled From version 62: this feature is behind the media.mediasource.experimental.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android Yes Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android Yes
appendStream
弃用 非标
Chrome 不支持 No Edge 不支持 12 — 79 Firefox 不支持 No IE ? Opera 不支持 No Safari ? WebView Android ? Chrome Android ? Firefox Android 不支持 No Opera Android ? Safari iOS 不支持 No Samsung Internet Android ?
appendWindowEnd Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
appendWindowStart Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
audioTracks Chrome 23 Edge 12 Firefox 不支持 No IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
buffered Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
changeType
非标
Chrome 70
70
69 — 70
Disabled
Disabled From version 69 until version 70 (exclusive): this feature is behind the MediaSourceExperimental preference (needs to be set to true ). To change preferences in Chrome, visit chrome://flags.
Edge 79 Firefox 63
63
61 — 63
Disabled
Disabled From version 61 until version 63 (exclusive): this feature is behind the media.mediasource.experimental.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android 70 Chrome Android 70
70
69 — 70
Disabled
Disabled From version 69 until version 70 (exclusive): this feature is behind the MediaSourceExperimental preference (needs to be set to true ). To change preferences in Chrome, visit chrome://flags.
Firefox Android 不支持 No Opera Android ? Safari iOS 不支持 No Samsung Internet Android 10.0
mode Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
onabort Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android ? Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android ?
onerror Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android ? Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android ?
onupdate Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android ? Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android ?
onupdateend Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android ? Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android ?
onupdatestart Chrome 53 Edge 17 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android ? Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android ?
remove Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
removeAsync Chrome 不支持 No Edge 不支持 No Firefox 62
Disabled
62
Disabled
Disabled From version 62: this feature is behind the media.mediasource.experimental.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android Yes Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android Yes
textTracks Chrome 不支持 No Edge 18 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 8 WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
timestampOffset Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
trackDefaults
弃用 非标
Chrome ? Edge ? Firefox 不支持 No IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 不支持 No Opera Android ? Safari iOS 不支持 No Samsung Internet Android ?
updating Chrome 23 Edge 12 Firefox 42
42
25 — 42
注意事项 Disabled
Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0
videoTracks Chrome 23 Edge 12 Firefox 不支持 No IE 11
注意事项
11
注意事项
Only works on Windows 8+.
Opera 15 Safari 8 WebView Android 4.4.3 Chrome Android 33 Firefox Android 不支持 No Opera Android 14 Safari iOS 不支持 No Samsung Internet Android 3.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅