appendBuffer method

Appends the specified media segment to the SourceBuffer.

Important  This method is not supported in Internet Explorer 11 on Windows 7.





data [in]

Type: ArrayBuffer

The media segment to append.

Return value

This method does not return a value.


This example uses XMLHttpRequest to get a segment of video (range) from a file (url) and appends it to the current sourceBuffer.

//  Load video's initialization segment 
function initVideo(range, url) {
  var xhr = new XMLHttpRequest();
  if (range || url) { // make sure we've got incoming params

    // Set the desired range of bytes we want from the mp4 video file'GET', url);
    xhr.setRequestHeader("Range", "bytes=" + range);
    segCheck = (timeToDownload(range) * .8).toFixed(3); // use .8 as fudge factor
    xhr.responseType = 'arraybuffer';
    try {
      xhr.addEventListener("readystatechange", function () {
         if (xhr.readyState == xhr.DONE) { // wait for video to load
          // Add response to buffer
          try {
            videoSource.appendBuffer(new Uint8Array(xhr.response));
            // Wait for the update complete event before continuing
            videoSource.addEventListener("update",updateFunct, false);

          } catch (e) {
            log('Exception while appending initialization content', e);
      }, false);
    } catch (e) {
  } else {
    return // No value for range or url

function updateFunct() {
  //  This is a one shot function, when init segment finishes loading, 
  //    update the buffer flag, call getStarted, and then remove this event.
  bufferUpdated = true;
  getStarted(file); // Get video playback started
  //  Now that video has started, remove the event listener
  videoSource.removeEventListener("update", updateFunct);

See also

Building a simple MPEG-DASH streaming player