SourceBuffer

Instanzeigenschaften

SourceBuffer.appendWindowEnd

Steuert den Zeitstempel für das Ende des Append-Fensters.

SourceBuffer.appendWindowStart

Steuert den Zeitstempel für den Anfang des Append-Fensters. Dies ist ein Zeitstempelbereich, der verwendet werden kann, um zu filtern, welche Mediendaten dem SourceBuffer hinzugefügt werden. Kodierte Medienframes mit Zeitstempeln innerhalb dieses Bereichs werden hinzugefügt, während diejenigen außerhalb des Bereichs herausgefiltert werden.

SourceBuffer.audioTracks Schreibgeschützt

Eine Liste der momentan im SourceBuffer enthaltenen Audiotracks.

SourceBuffer.buffered Schreibgeschützt

Gibt die Zeitbereiche zurück, die aktuell im SourceBuffer gepuffert werden.

SourceBuffer.mode

Steuert, wie die Reihenfolge der Mediensegmente im SourceBuffer gehandhabt wird, ob sie in beliebiger Reihenfolge hinzugefügt werden können oder in einer strikten Sequenz gehalten werden müssen.

SourceBuffer.textTracks Schreibgeschützt Experimentell

Eine Liste der momentan im SourceBuffer enthaltenen Texttracks.

SourceBuffer.timestampOffset

Steuert den Offset, der auf Zeitstempel innerhalb von Mediensegmenten angewendet wird, die nachfolgend dem SourceBuffer hinzugefügt werden.

SourceBuffer.updating Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob der SourceBuffer aktuell aktualisiert wird – d.h. ob eine SourceBuffer.appendBuffer() oder SourceBuffer.remove() Operation derzeit im Gange ist.

SourceBuffer.videoTracks Schreibgeschützt

Eine Liste der momentan im SourceBuffer enthaltenen Videotracks.

Instanzmethoden

Erbt Methoden von seinem übergeordneten Interface, EventTarget.

SourceBuffer.abort()

Bricht das aktuelle Segment ab und setzt den Segment-Parser zurück.

SourceBuffer.appendBuffer()

Fügt Mediasegmentdaten aus einem ArrayBuffer, einem TypedArray oder einem DataView-Objekt zum SourceBuffer hinzu.

SourceBuffer.appendBufferAsync() Nicht standardisiert Experimentell

Startet den Prozess des asynchronen Hinzufügens des angegebenen Puffers zum SourceBuffer. Gibt ein Promise zurück, das erfüllt wird, sobald der Puffer hinzugefügt wurde.

SourceBuffer.changeType()

Ändert den MIME-Typ, den zukünftige Aufrufe von appendBuffer() erwarten, dass die neuen Daten diesem entsprechen.

SourceBuffer.remove()

Entfernt Mediensegmente innerhalb eines bestimmten Zeitbereichs aus dem SourceBuffer.

SourceBuffer.removeAsync() Nicht standardisiert Experimentell

Startet den Prozess des asynchronen Entfernens von Mediensegmenten im angegebenen Bereich aus dem SourceBuffer. Gibt ein Promise zurück, das erfüllt wird, sobald alle passenden Segmente entfernt wurden.

Ereignisse

abort

Wird ausgelöst, wenn das Hinzufügen zum Puffer abgebrochen wird, weil die Methoden SourceBuffer.abort() oder MediaSource.removeSourceBuffer() aufgerufen werden, während der Algorithmus SourceBuffer.appendBuffer() noch läuft. SourceBuffer.updating ändert sich von true zu false.

error

Wird ausgelöst, wenn ein Fehler beim Verarbeiten einer appendBuffer() Operation auftritt. SourceBuffer.updating ändert sich von true zu false.

update

Wird ausgelöst, wann immer SourceBuffer.appendBuffer() oder SourceBuffer.remove() abgeschlossen wird. SourceBuffer.updating ändert sich von true zu false.

updateend

Wird nach dem (nicht unbedingt erfolgreichen) Abschluss einer appendBuffer() oder remove() Operation ausgelöst. Dieses Ereignis wird nach den Ereignissen update, error oder abort ausgelöst.

updatestart

Wird ausgelöst, wenn eine appendBuffer() oder remove() Operation beginnt. updating ändert sich von false zu true.

Beispiele

Laden eines Videos in Stücken

Das folgende Beispiel lädt ein Video so schnell wie möglich in Stücken und spielt es ab, sobald es kann.

Der komplette Code ist verfügbar unter https://github.com/mdn/dom-examples/tree/main/sourcebuffer und Sie können die Demo live ausprobieren unter https://mdn.github.io/dom-examples/sourcebuffer/.

const video = document.querySelector("video"); const assetURL = "frag_bunny.mp4"; // Need to be specific for Blink regarding codecs const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; function loadVideo() { if (MediaSource.isTypeSupported(mimeCodec)) { const mediaSource = new MediaSource(); console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener("sourceopen", sourceOpen); } else { console.error("Unsupported MIME type or codec: ", mimeCodec); } } async function sourceOpen() { console.log(this.readyState); // open const sourceBuffer = this.addSourceBuffer(mimeCodec); const response = await fetch(assetURL); const buffer = await response.arrayBuffer(); sourceBuffer.addEventListener("updateend", () => { this.endOfStream(); video.play(); console.log(this.readyState); // ended }); sourceBuffer.appendBuffer(buffer); } const load = document.querySelector("#load"); load.addEventListener("click", loadVideo); 

Spezifikationen

Browser-Kompatibilität

Siehe auch

• MediaSource
• SourceBufferList