MediaSource: sourceclose event

Limited availability

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

Want more browser support for this feature? Tell us why.

See full compatibility
Learn more

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 addEventListener():

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

Alternatively, assign to the event handler property of the interface:

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);