We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

SourceBuffer

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.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.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.buffered Read only
Returns the time ranges that are currently buffered in the SourceBuffer.
SourceBuffer.timestampOffset
Controls the offset applied to timestamps inside media segments that are subsequently appended to the SourceBuffer.
SourceBuffer.audioTracks Read only
A list of the audio tracks currently contained inside the SourceBuffer.
SourceBuffer.videoTracks Read only
A list of the video tracks currently contained inside the SourceBuffer.
SourceBuffer.textTracks Read only
A list of the text tracks currently contained inside the SourceBuffer.
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.appendWindowEnd
Controls the timestamp for the end of the append window.
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.

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.appendBuffer()
Appends media segment data from an ArrayBuffer or ArrayBufferView object to the SourceBuffer.
SourceBuffer.appendStream()
Appends media segment data from a ReadableStream object to the SourceBuffer.
SourceBuffer.abort()
Aborts the current segment and resets the segment parser.
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
Media Source Extensions
The definition of 'SourceBuffer' in that specification.
Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

31

23 — 31 -webkit-

Yes

42

25 — 421 2

113158
mode

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
updating

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
buffered

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
timestampOffset

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
audioTracks

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
videoTracks

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
textTracks

31

23 — 31 -webkit-

Yes

42

25 — 421 2

113158
appendWindowStart

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
appendWindowEnd

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
trackDefaults ? ? No ? ? ?
onabort53 No

42

25 — 421 2

113158
onerror53 No

42

25 — 421 2

113158
onupdate53 No

42

25 — 421 2

113158
onupdatestart53 No

42

25 — 421 2

113158
onupdateend53 No

42

25 — 421 2

113158
appendBuffer

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
appendStream No12 No ? No ?
abort

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
remove

31

23 — 31 -webkit-

12

42

25 — 421 2

113158
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support33 ? Yes No30 No ?
mode33 ? Yes No30 No ?
updating33 ? Yes No30 No ?
buffered33 ? Yes No30 No ?
timestampOffset33 ? Yes No30 No ?
audioTracks33 ? Yes No30 No ?
videoTracks33 ? Yes No30 No ?
textTracks33 ? Yes No30 No ?
appendWindowStart33 ? Yes No30 No ?
appendWindowEnd33 ? Yes No30 No ?
trackDefaults ? ? ? No ? No ?
onabort33 ? Yes No30 No ?
onerror33 ? Yes No30 No ?
onupdate33 ? Yes No30 No ?
onupdatestart33 ? Yes No30 No ?
onupdateend33 ? Yes No30 No ?
appendBuffer33 ? Yes No30 No ?
appendStream ? ? ? No ? No ?
abort33 ? Yes No30 No ?
remove33 ? Yes No30 No ?

1. Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.

2. From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.

3. Only works on Windows 8+.

See also

Document Tags and Contributors

Contributors to this page: fscholz, Jedipedia, jpmedley, rhues, abbycar, AlexChuev, chrisdavidmills
Last updated by: fscholz,