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.

EventTarget

SourceBufferInstance 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  
Experimental

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.updating` Read only 

A boolean indicating whether the `SourceBuffer` is currently being updated — i.e. whether an `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()` operation is currently in progress.

`SourceBuffer.videoTracks` Read only 

A list of the video tracks currently contained inside the `SourceBuffer`.

Instance 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`, a `TypedArray` or a `DataView` object to the `SourceBuffer`.

`SourceBuffer.appendBufferAsync()` 
Non-standard

Experimental

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.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()` 
Non-standard

Experimental

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.

Events
------

`abort`

Fired whenever `SourceBuffer.appendBuffer()` is ended by a call to `SourceBuffer.abort()`. `SourceBuffer.updating` changes from `true` to `false`.

`error`

Fired whenever an error occurs during `SourceBuffer.appendBuffer()`. `SourceBuffer.updating` changes from `true` to `false`.

`update`

Fired whenever `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()` completes. `SourceBuffer.updating` changes from `true` to `false`. This event is fired before `updateend`.

`updateend`

Fired after `SourceBuffer.appendBuffer()` or `SourceBuffer.remove()` ends. This event is fired after `update`.

`updatestart`

Fired whenever the value of `SourceBuffer.updating` changes from `false` to `true`.

Examples
--------

### Loading a video chunk by chunk

The following example loads a video chunk by chunk as fast as possible, playing it as soon as it can.

You can see the complete code at https://github.com/mdn/dom-examples/tree/main/sourcebuffer and try the demo live at https://mdn.github.io/dom-examples/sourcebuffer/.


```js
const video = document.querySelector("video");

const assetURL = "frag\_bunny.mp4";
// Need to be specific for Blink regarding codecs
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

function loadVideo() {
  if (MediaSource.isTypeSupported(mimeCodec)) {
    const 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);
  }
}

async function sourceOpen() {
  console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  const response = await fetch(assetURL);
  const buffer = await response.arrayBuffer();
  sourceBuffer.addEventListener("updateend", () => {
    mediaSource.endOfStream();
    video.play();
    console.log(mediaSource.readyState); // ended
  });
  sourceBuffer.appendBuffer(buffer);
}

const load = document.querySelector("#load");
load.addEventListener("click", loadVideo);
```

Specifications
--------------

| Specification |
| --- |
| Media Source Extensions™ # sourcebuffer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MediaSource`
* `SourceBufferList`