SourceBuffer

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="/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="/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 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

Browser compatibility

See also

• MediaSource
• SourceBufferList