就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. 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. 

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/SourceBuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="211" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SourceBuffer</text></a></svg></div>
					
  a:hover text { fill: #0095DD; pointer-events: all;}

特性

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 改变从 true to false .
SourceBuffer.onerror
Fired whenever an error occurs during SourceBuffer.appendBuffer() or SourceBuffer.appendStream() . SourceBuffer.updating 改变从 true to false .
SourceBuffer.onupdate
Fired whenever SourceBuffer.appendBuffer() method or the SourceBuffer.remove() completes. SourceBuffer.updating 改变从 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 对象到 SourceBuffer .
SourceBuffer.appendBufferAsync()
Starts the process of asynchronously appending the specified buffer to the SourceBuffer 。返回 Promise which is fulfilled once the buffer has been appended.
SourceBuffer.appendStream()
Appends media segment data from a ReadableStream 对象到 SourceBuffer .
SourceBuffer.changeType()
更改 MIME 类型 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 。返回 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();
}

规范

规范 状态 注释
媒体源扩展
The definition of 'SourceBuffer' in that specification. 		推荐 初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
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 Edge 12 Firefox 42 IE 11 Opera 18 Safari 8 WebView Android 4.4.3 Chrome Android 31 Firefox Android 不支持 No Opera Android 18 Safari iOS 不支持 No Samsung Internet Android 3.0
abort Chrome 23 Edge 12 Firefox 42 IE 11 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 IE 11 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 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 IE 11 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 IE 11 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 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 IE 11 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 Edge 79 Firefox 63 IE ? Opera ? Safari ? WebView Android 70 Chrome Android 70 Firefox Android 不支持 No Opera Android ? Safari iOS 不支持 No Samsung Internet Android 10.0
mode Chrome 23 Edge 12 Firefox 42 IE 11 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 IE 11 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 IE 11 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 IE 11 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 IE 11 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 IE 11 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 IE 11 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 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 IE 11 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 IE 11 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 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

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

非标。预期跨浏览器支持较差。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

元数据

  • 最后修改：
  1. Media Source Extensions API
  2. SourceBuffer
  3. 特性
    1. appendWindowEnd
    2. appendWindowStart
    3. audioTracks
    4. buffered
    5. mode
    6. textTracks
    7. timestampOffset
    8. trackDefaults
    9. updating
    10. videoTracks
  4. 方法
    1. abort()
    2. appendBuffer()
    3. appendBufferAsync()
    4. appendStream()
    5. changeType()
    6. remove()
    7. removeAsync()
  5. 继承：
    1. EventTarget
  6. Related pages for Media Source Extensions
    1. HTMLVideoElement.getVideoPlaybackQuality()
    2. MediaSource
    3. SourceBufferList
    4. TextTrack.sourceBuffer
    5. TrackDefault
    6. TrackDefaultList
    7. URL.createObjectURL()
    8. VideoPlaybackQuality
    9. VideoTrack.sourceBuffer