MediaSource: sourceended-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 sourceended-Ereignis wird ausgelöst, wenn sich der readyState eines MediaSource-Objekts zu "ended" ändert. Dies zeigt an, dass die Anwendung keine weiteren Daten mehr an die MediaSource sendet. Wenn eine Anwendung alle Mediendaten an die mit einer MediaSource verknüpften SourceBuffer-Objekte angehängt hat, ruft sie die Methode MediaSource.endOfStream() für die MediaSource auf. Dadurch wechselt der readyState zu "ended", und das sourceended-Ereignis wird ausgelöst.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("sourceended", (event) => {})
Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:
onsourceended = (event) => {}
Ereignistyp
Ein generisches Event.
Beispiele
Das sourceopen-Ereignis behandeln
Dieses Beispiel zeigt, wie ein Videoelement für die Wiedergabe eingerichtet und das sourceended-Ereignis zur ordnungsgemäßen Freigabe von Ressourcen behandelt wird. Der Code richtet eine MediaSource ein, startet die Wiedergabe durch Abrufen und Puffern von Videodaten und nutzt anschließend das sourceended-Ereignis, um Event-Listener zu entfernen und den Benutzer zu benachrichtigen, wenn die Wiedergabe abgeschlossen ist.
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);
});
Spezifikationen
| Spezifikation |
|---|
| Media Source Extensions™ # dfn-sourceended |