W3cubDocs

/Web APIs

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>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`sourceended_event`	53 31–53 The `onsourceended` event handler property is not supported.	17 12–17 The `onsourceended` event handler property is not supported.	42	40 18–40 The `onsourceended` event handler property is not supported.	10.1 8–10.1 The `onsourceended` event handler property is not supported.	53 31–53 The `onsourceended` event handler property is not supported.	41	41 18–41 The `onsourceended` event handler property is not supported.	13 Exposed in Mobile Safari on iPad but not on iPhone.	6.0 2.0–6.0 The `onsourceended` event handler property is not supported.	53 4.4.3–53 The `onsourceclose` event handler property is not supported.	No