SourceBuffer: appendBuffer() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Note: This feature is available in Dedicated Web Workers.

The appendBuffer() method of the SourceBuffer interface appends media segment data from an ArrayBuffer, a TypedArray or a DataView object to the SourceBuffer.

Syntax

js
appendBuffer(source)

Parameters

source

Either an ArrayBuffer, a TypedArray or a DataView object that contains the media segment data you want to add to the SourceBuffer.

Return value

None (undefined).

Exceptions

DOMException QuotaExceededError

The buffer is full, and no more data can be appended. This might occur if the SourceBuffer has reached a browser-defined limit on the amount of buffered data.

DOMException InvalidStateError

Thrown in one of the following cases:

  • The SourceBuffer object's updating attribute is true. You must wait for any previous append, update, or remove operations to complete (indicated by the updateend event) before calling appendBuffer() again.
  • The SourceBuffer has been removed from the sourceBuffers attribute of the parent media source.
  • The HTMLMediaElement's error attribute is not null.

Examples

Basic usage

This example demonstrates adding video data to a video element for playback. The MediaSource provides the video data, and the SourceBuffer adds that data. The example fetches video segment data, appends it to the SourceBuffer, and ends the stream when finished.

js
const mediaSource = new MediaSource();
const video = document.querySelector("video");
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener("sourceopen", () => {
  const sourceBuffer = mediaSource.addSourceBuffer(
    'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
  );

  fetch("/my-video-segment.mp4")
    .then((response) => response.arrayBuffer())
    .then((buffer) => {
      sourceBuffer.appendBuffer(buffer);
      sourceBuffer.addEventListener("updateend", () => {
        if (mediaSource.readyState === "open") {
          mediaSource.endOfStream();
        }
      });
    });
});

Handling errors

This example demonstrates how to handle errors that may occur when calling appendBuffer(). The SourceBuffer's error event is listened to for error reporting. A try...catch block attempts to append invalid data to the SourceBuffer, which will cause an error to be thrown. The code handles InvalidStateError and QuotaExceededError and logs a generic error for any other error.

js
sourceBuffer.addEventListener("error", (e) => {
  console.error("Error appending buffer:", e);
  // Handle the error appropriately, e.g., show a message to the user,
  // try a different source, or stop playback.
});

try {
  sourceBuffer.appendBuffer(invalidData); // invalidData is not a BufferSource
} catch (e) {
  if (e instanceof InvalidStateError) {
    console.error(
      "InvalidStateError: The SourceBuffer is in an invalid state.",
    );
  } else if (e instanceof QuotaExceededError) {
    console.error("QuotaExceededError: The buffer is full.");
  } else {
    console.error("An unexpected error occurred:", e);
  }
}

Specifications

Specification
Media Source Extensions™
# dom-sourcebuffer-appendbuffer

See also