MediaSource: sourceended 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 sourceended event is fired when a MediaSource object's readyState changes to "ended". This indicates that the application has finished sending data to the MediaSource. When an application has finished appending all media data to the SourceBuffer objects associated with a MediaSource, it calls the MediaSource.endOfStream() method on the MediaSource. This causes the readyState to transition to "ended" and triggers the sourceended event.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("sourceended", (event) => {})
onsourceended = (event) => {}
Event type
A generic Event.
Examples
Handling the sourceopen event
This example demonstrates setting up a video element for playback and handling the sourceended event for proper resource management. The code sets up a MediaSource, initiates playback by fetching and buffering video data, and then uses the sourceended event to perform cleanup tasks like removing event listeners and notifying the user when playback is complete.
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);
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
});
});
});
mediaSource.addEventListener("sourceended", (event) => {
console.log("MediaSource sourceended:", event);
URL.revokeObjectURL(video.src);
// Perform cleanup
// Remove event listeners from SourceBuffer and MediaSource
sourceBuffer.removeEventListener("updateend", () => {});
mediaSource.removeEventListener("sourceopen", () => {});
// Notify user (e.g., display a "Playback finished" message)
const messageElement = document.createElement("p");
messageElement.textContent = "Playback finished.";
document.body.appendChild(messageElement);
});
Specifications
| Specification |
|---|
| Media Source Extensions™ # dfn-sourceended |