MediaSource: sourceended event - Web APIs

MediaSource: sourceended event - Web APIs | MDN

Syntax

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

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

onsourceended = (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);
});