{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}{{draft}}
The SourceBuffer
interface represents a chunk of media to be passed into an {{domxref("HTMLMediaElement")}} and played, via a MediaSource
object. This can be made up of one or several media segments.
Properties
Inherits properties from its parent interface, {{domxref("EventTarget")}}.
- {{domxref("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. - {{domxref("SourceBuffer.updating")}} {{readonlyInline}}
- Indicates whether the
SourceBuffer
is currently being updated — i.e. whether an {{domxref("SourceBuffer.appendBuffer()")}}, ,{{domxref("SourceBuffer.appendStream()")}} or {{domxref("SourceBuffer.remove()")}} operation is currently in progress. - {{domxref("SourceBuffer.buffered")}} {{readonlyInline}}
- Returns the time ranges that are currently buffered in the
SourceBuffer
. - {{domxref("SourceBuffer.timestampOffset")}}
- Controls the offset applied to timestamps inside media segments that are subsequently appended to the
SourceBuffer
. - {{domxref("SourceBuffer.audioTracks")}} {{readonlyInline}}
- A list of the audio tracks currently contained inside the
SourceBuffer
. - {{domxref("SourceBuffer.videoTracks")}} {{readonlyInline}}
- A list of the video tracks currently contained inside the
SourceBuffer
. - {{domxref("SourceBuffer.textTracks")}} {{readonlyInline}}
- A list of the text tracks currently contained inside the
SourceBuffer
. - {{domxref("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 wthin this range will be appended, whereas those outside the range will be filtered out. - {{domxref("SourceBuffer.appendWindowEnd")}}
- Controls the timestamp for the end of the append window.
Methods
Inherits properties from its parent interface, {{domxref("EventTarget")}}.
- {{domxref("SourceBuffer.appendBuffer()")}}
- Appends media segment data from an {{domxref("ArrayBuffer")}} or
ArrayBufferList
object to theSourceBuffer
. - {{domxref("SourceBuffer.appendStream()")}}
- Appends media segment data from a
ReadableStream
object to theSourceBuffer
. - {{domxref("SourceBuffer.abort()")}}
- Aborts the current segment and resets the segment parser (needs better, human-readable language — this is copied straight from the spec.)
- {{domxref("SourceBuffer.remove()")}}
- Removes media segments within a specific time range from the
SourceBuffer
.
Examples
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(); };
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Media Source Extensions', '#sourcebuffer', 'SourceBuffer')}} | {{Spec2('Media Source Extensions')}} | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 23 | {{CompatGeckoDesktop("25.0")}}[1] {{CompatGeckoDesktop("42.0")}} |
11[2] | 15 | 8 |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.4.4 |
{{CompatNo}} |
{{CompatNo}} | 11 | 30 | {{CompatNo}} |
[1] Available after switching the about:config
preference media.mediasource.enabled
to true
. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. This was removed in 42+.
[2] Only works on Windows 8+.
See also
- {{domxref("MediaSource")}}
- {{domxref("SourceBufferList")}}