files/en-us/web/api/mediasource/sourceclose_event/index.md
{{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}}
The sourceclose event is fired when a {{domxref("MediaSource")}} object's {{domxref("MediaSource.readyState", "readyState")}} changes to "closed". This indicates that the MediaSource has been detached from the media element.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("sourceclose", (event) => { })
onsourceclose = (event) => { }
A generic {{domxref("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 {{domxref("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);
{{Specifications}}
{{Compat}}