MediaSource: sourceclose-Ereignis

Limited availability

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

Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.

Das sourceclose-Ereignis wird ausgelöst, wenn sich der readyState eines MediaSource-Objekts auf "closed" ändert. Dies weist darauf hin, dass die MediaSource von dem Medien-Element getrennt wurde.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onsourceclose = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Umgang mit dem sourceclose-Ereignis

Dieses Beispiel zeigt, wie ein Medien-Element von einer MediaSource getrennt wird und wie das sourceclose-Ereignis zur ordnungsgemäßen Ressourcenverwaltung behandelt wird. Der Code richtet eine MediaSource ein, verbindet sie mit einem Video-Element und hört auf das sourceclose-Ereignis. Wenn das Ereignis ausgelöst wird, führt es Bereinigungsaufgaben aus (revokeObjectURL).

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

Spezifikationen

Specification
Media Source Extensions™
# dfn-sourceclose

Browser-Kompatibilität