ManagedMediaSource: endstreaming-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.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das endstreaming-Ereignis der Schnittstelle ManagedMediaSource wird ausgelöst, wenn die Eigenschaft streaming von true zu false wechselt. Dies zeigt an, dass der User Agent genügend Daten gepuffert hat, um eine unterbrechungsfreie Wiedergabe zu gewährleisten. Die Anwendung kann daher aufhören, neue Mediensegmente abzurufen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("endstreaming", (event) => {});
Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onendstreaming = (event) => {};
Ereignistyp
Ein generisches Event.
Beispiele
Abrufe als Reaktion auf endstreaming pausieren
Dieses Beispiel erstellt eine ManagedMediaSource, verknüpft sie mit einem <video>-Element und verwendet die Ereignisse startstreaming und endstreaming, um zu steuern, wann Mediensegmente abgerufen werden.
const videoUrl =
"https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
if (ManagedMediaSource.isTypeSupported(mediaType)) {
const video = document.createElement("video");
const source = new ManagedMediaSource();
video.controls = true;
video.disableRemotePlayback = true;
video.src = URL.createObjectURL(source);
document.body.appendChild(video);
let shouldFetch = false;
source.addEventListener("sourceopen", () => {
const sourceBuffer = source.addSourceBuffer(mediaType);
source.addEventListener("startstreaming", async () => {
console.log("startstreaming — fetching media data");
shouldFetch = true;
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
if (shouldFetch) {
sourceBuffer.appendBuffer(data);
}
});
source.addEventListener("endstreaming", () => {
console.log("endstreaming — enough data buffered");
shouldFetch = false;
});
});
}
Spezifikationen
| Spezifikation |
|---|
| Media Source Extensions™ # dfn-endstreaming |