Das sourceopen Ereignis wird ausgelöst, wenn sich der readyState eines MediaSource Objekts in "open" ändert. Dies deutet darauf hin, dass das MediaSource bereit ist, Daten von SourceBuffer Objekten zu empfangen. Dies kann entweder auftreten, wenn das MediaSource Objekt erstmals an ein Medienelement angehängt wird oder wenn sich der readyState von "ended" zurück zu "open" ändert.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Ereignishandler-Eigenschaft fest.

addEventListener("sourceopen", (event) => {});

onsourceopen = (event) => {};

Ereignistyp

Ein generisches Event.

Beispiele

Umgang mit dem sourceopen Ereignis

Dieses Beispiel richtet ein MediaSource ein, verbindet es mit einem Video-Element und lauscht auf das sourceopen Ereignis. Wenn das Ereignis ausgelöst wird, wird ein SourceBuffer hinzugefügt, um die Videodaten zu handhaben, die Daten werden abgerufen, dem Puffer hinzugefügt und schließlich die Objekt-URL widerrufen, wenn die Quelle endet.

const video = document.getElementById("myVideo");
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener("sourceopen", (event) => {
  console.log("MediaSource sourceopen:", event);
  // Add source buffers and begin adding media data.
  const sourceBuffer = mediaSource.addSourceBuffer(
    'video/mp4; codecs="avc1.42E01E"',
  );
  fetch("video-data.mp4")
    .then((response) => response.arrayBuffer())
    .then((data) => {
      sourceBuffer.appendBuffer(data);
    });
});

mediaSource.addEventListener("sourceended", () => {
  URL.revokeObjectURL(video.src);
});

Spezifikationen

Browser-Kompatibilität