The 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="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" 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="https://developer.mozilla.org/en-US/docs/Web/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;}
Properties
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
Read only- A list of the audio tracks currently contained inside the
SourceBuffer
. SourceBuffer.buffered
Read only- 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
Read only- 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
Read only- A boolean indicating whether the
SourceBuffer
is currently being updated — i.e. whether anSourceBuffer.appendBuffer()
,SourceBuffer.appendStream()
, orSourceBuffer.remove()
operation is currently in progress. SourceBuffer.videoTracks
Read only- A list of the video tracks currently contained inside the
SourceBuffer
.
Event handlers
SourceBuffer.onabort
- Fired whenever
SourceBuffer.appendBuffer()
orSourceBuffer.appendStream()
is ended by a call toSourceBuffer.abort()
.SourceBuffer.updating
changes fromtrue
tofalse
. SourceBuffer.onerror
- Fired whenever an error occurs during
SourceBuffer.appendBuffer()
orSourceBuffer.appendStream()
.SourceBuffer.updating
changes fromtrue
tofalse
. SourceBuffer.onupdate
- Fired whenever
SourceBuffer.appendBuffer()
method or theSourceBuffer.remove()
completes.SourceBuffer.updating
changes fromtrue
tofalse
. This event is fired beforeonupdateend
. SourceBuffer.onupdateend
- Fired whenever
SourceBuffer.appendBuffer()
method or theSourceBuffer.remove()
has ended. This event is fired afteronupdate
. SourceBuffer.onupdatestart
- Fired whenever the value of
SourceBuffer.updating
transitions fromfalse
totrue
.
Methods
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
orArrayBufferView
object to theSourceBuffer
. SourceBuffer.appendBufferAsync()
'- Starts the process of asynchronously appending the specified buffer to the
SourceBuffer
. Returns aPromise
which is fulfilled once the buffer has been appended. SourceBuffer.appendStream()
- Appends media segment data from a
ReadableStream
object to theSourceBuffer
. 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 aPromise
which is fulfilled once all matching segments have been removed.
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 |
Media Source ExtensionsThe definition of 'SourceBuffer' in that specification. | Recommendation | Initial definition. |
Browser compatibility
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
SourceBuffer
|
Chrome Full support 31 Full support 31 No support 23 — 31 Prefixed' Implemented with the vendor prefix: WebKit |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera Full support 18 Full support 18 No support 15 — 18 Prefixed' Implemented with the vendor prefix: WebKit |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android Full support 31 Full support 31 No support 25 — 31 Prefixed' Implemented with the vendor prefix: WebKit |
Firefox Android
No support No |
Opera Android Full support 18 Full support 18 No support 14 — 18 Prefixed' Implemented with the vendor prefix: WebKit |
Safari iOS Partial support 13 Partial support 13 Notes' Exposed in Mobile Safari on iPad but not on iPhone. |
Samsung Internet Android Full support 3.0 Full support 3.0 No support 2.0 — 3.0 Prefixed' Implemented with the vendor prefix: WebKit |
abort
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 25 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 2.0 |
appendBuffer
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
appendBufferAsync
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 62 Full support 62 Disabled' From version 62: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support Yes |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
Chrome
No support No |
Edge
No support 12 — 79 |
Firefox
No support No |
IE
? |
Opera
No support No |
Safari
? |
WebView Android
? |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
No support No |
Samsung Internet Android
? | |
appendWindowEnd
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
appendWindowStart
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
audioTracks
|
Chrome Full support 51 Full support 51 Disabled' From version 51: this feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox
No support No |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera Full support 38 Full support 38 Disabled' From version 38: this feature is behind the |
Safari
Full support 8 |
WebView Android
No support No |
Chrome Android Full support 51 Full support 51 Disabled' From version 51: this feature is behind the |
Firefox Android
No support No |
Opera Android Full support 41 Full support 41 Disabled' From version 41: this feature is behind the |
Safari iOS Partial support 13 Partial support 13 Notes' Exposed in Mobile Safari on iPad but not on iPhone. |
Samsung Internet Android
No support No |
buffered
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
Chrome Full support 70 Full support 70 No support 69 — 70 Disabled' From version 69 until version 70 (exclusive): this feature is behind the |
Edge
Full support 79 |
Firefox Full support 63 Full support 63 No support 61 — 63 Disabled' From version 61 until version 63 (exclusive): this feature is behind the |
IE
? |
Opera
? |
Safari
? |
WebView Android
Full support 70 |
Chrome Android Full support 70 Full support 70 No support 69 — 70 Disabled' From version 69 until version 70 (exclusive): this feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 | |
mode
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
onabort
|
Chrome
Full support 53 |
Edge
Full support 17 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
? |
onerror
|
Chrome
Full support 53 |
Edge
Full support 17 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
? |
onupdate
|
Chrome
Full support 53 |
Edge
Full support 17 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
? |
onupdateend
|
Chrome
Full support 53 |
Edge
Full support 17 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
? |
onupdatestart
|
Chrome
Full support 53 |
Edge
Full support 17 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
? |
remove
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
removeAsync
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 62 Full support 62 Disabled' From version 62: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support Yes |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
textTracks
|
Chrome
No support No |
Edge
Full support 18 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
Full support 8 |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS Partial support 13 Partial support 13 Notes' Exposed in Mobile Safari on iPad but not on iPhone. |
Samsung Internet Android
No support No |
timestampOffset
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
Chrome
? |
Edge
? |
Firefox
No support No |
IE
? |
Opera
? |
Safari
? |
WebView Android
? |
Chrome Android
? |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
No support No |
Samsung Internet Android
? | |
updating
|
Chrome
Full support 23 |
Edge
Full support 12 |
Firefox Full support 42 Full support 42 No support 25 — 42 Notes' 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 |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera
Full support 15 |
Safari
Full support 8 |
WebView Android
Full support 4.4.3 |
Chrome Android
Full support 33 |
Firefox Android
No support No |
Opera Android
Full support 14 |
Safari iOS
No support No |
Samsung Internet Android
Full support 3.0 |
videoTracks
|
Chrome Full support 51 Full support 51 Disabled' From version 51: this feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox
No support No |
IE Full support 11 Full support 11 Notes' Only works on Windows 8+. |
Opera Full support 38 Full support 38 Disabled' From version 38: this feature is behind the |
Safari
Full support 8 |
WebView Android
No support No |
Chrome Android Full support 51 Full support 51 Disabled' From version 51: this feature is behind the |
Firefox Android
No support No |
Opera Android Full support 41 Full support 41 Disabled' From version 41: this feature is behind the |
Safari iOS Partial support 13 Partial support 13 Notes' Exposed in Mobile Safari on iPad but not on iPhone. |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
SourceBuffer by Mozilla Contributors is licensed under CC-BY-SA 2.5.