MediaSource: sourceclose event

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 sourceclose event is fired when a MediaSource object's readyState changes to "closed". This indicates that the MediaSource has been detached from the media element.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("sourceclose", (event) => { })

onsourceclose = (event) => { }

This example demonstrates detaching a media element from a MediaSource and handling the sourceclose event for proper resource management. The code sets up a MediaSource, attaches it to a video element, and listens for the sourceclose event. When the event fires, it performs cleanup tasks (revokeObjectURL).

const video = document.getElementById("myVideo");
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener("sourceopen", (event) => {
  const sourceBuffer = mediaSource.addSourceBuffer(
    'video/mp4; codecs="avc1.42E01E"',
  );
  fetch("video-data.mp4")
    .then((response) => response.arrayBuffer())
    .then((data) => {
      sourceBuffer.appendBuffer(data);
    });
});

function detachMediaSource() {
  video.src = null; // Detach the MediaSource
}

mediaSource.addEventListener("sourceclose", (event) => {
  console.log("MediaSource sourceclose:", event);
  // Perform cleanup tasks here, e.g., release resources, update UI
  URL.revokeObjectURL(video.src); // Clean up the object URL
});

// Call detachMediaSource() when appropriate, e.g., on a button click
document
  .getElementById("detachButton")
  .addEventListener("click", detachMediaSource);