Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

MediaSource: sourceclose-Ereignis

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

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

Das sourceclose-Ereignis wird ausgelöst, wenn sich der readyState eines MediaSource-Objekts zu "closed" ändert. Dies zeigt an, dass die MediaSource vom Medienelement getrennt wurde.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

js
onsourceclose = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Das sourceclose-Ereignis behandeln

Dieses Beispiel zeigt, wie ein Medienelement von einer MediaSource getrennt und das sourceclose-Ereignis behandelt wird, um Ressourcen ordnungsgemäß freizugeben. Der Code richtet eine MediaSource ein, verknüpft sie mit einem Videoelement und überwacht das sourceclose-Ereignis. Wenn das Ereignis ausgelöst wird, gibt er Ressourcen mithilfe von revokeObjectURL frei.

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

Spezifikation
Media Source Extensions™
# dfn-sourceclose

Browser-Kompatibilität