Web/API/SourceBuffer

From Get docs

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.

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 an SourceBuffer.appendBuffer(), SourceBuffer.appendStream(), or SourceBuffer.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() 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.

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 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.

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

Update compatibility data on 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 Full support 31


Full support 31


No support 23 — 31

Prefixed'

Prefixed' Implemented with the vendor prefix: WebKit

Edge

Full support 12

Firefox Full support 42


Full support 42


No support 25 — 42

Notes' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

Notes' Only works on Windows 8+.

Opera Full support 18


Full support 18


No support 15 — 18

Prefixed'

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'

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'

Prefixed' Implemented with the vendor prefix: WebKit

Safari iOS Partial support 13

Notes'

Partial support 13

Notes'

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'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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

Disabled'

Full support 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 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

appendStream

Deprecated'Non-standard'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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

Disabled'

Full support 51

Disabled'

Disabled' From version 51: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). No support 12 — 79


Firefox

No support No

IE Full support 11

Notes'

Full support 11

Notes'

Notes' Only works on Windows 8+.

Opera Full support 38

Disabled'

Full support 38

Disabled'

Disabled' From version 38: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).

Safari

Full support 8

WebView Android

No support No

Chrome Android Full support 51

Disabled'

Full support 51

Disabled'

Disabled' From version 51: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android Full support 41

Disabled'

Full support 41

Disabled'

Disabled' From version 41: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).

Safari iOS Partial support 13

Notes'

Partial support 13

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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

changeType

Non-standard'

Chrome Full support 70


Full support 70


No support 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

Full support 79

Firefox Full support 63


Full support 63


No support 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

Full support 70

Chrome Android Full support 70


Full support 70


No support 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 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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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

Disabled'

Full support 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 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

Notes'

Partial support 13

Notes'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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

trackDefaults

Deprecated'Non-standard'

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' Disabled'

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 media.mediasource.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 11

Notes'

Full support 11

Notes'

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

Disabled'

Full support 51

Disabled'

Disabled' From version 51: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.

Edge Full support 79

Disabled'

Full support 79

Disabled'

Disabled' From version 79: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). No support 12 — 79


Firefox

No support No

IE Full support 11

Notes'

Full support 11

Notes'

Notes' Only works on Windows 8+.

Opera Full support 38

Disabled'

Full support 38

Disabled'

Disabled' From version 38: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).

Safari

Full support 8

WebView Android

No support No

Chrome Android Full support 51

Disabled'

Full support 51

Disabled'

Disabled' From version 51: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.

Firefox Android

No support No

Opera Android Full support 41

Disabled'

Full support 41

Disabled'

Disabled' From version 41: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).

Safari iOS Partial support 13

Notes'

Partial support 13

Notes'

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