SourceBuffer

Instanzeigenschaften

SourceBuffer.appendWindowEnd

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

SourceBuffer.appendWindowStart

Steuert den Zeitstempel für den Beginn des Append-Fensters. Dies ist ein Zeitstempelbereich, der verwendet werden kann, um zu filtern, welche Mediendaten in den SourceBuffer eingefügt werden. Codierte 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 aktuell im SourceBuffer enthaltenen Audiotracks.

SourceBuffer.buffered Schreibgeschützt

Gibt die aktuell im SourceBuffer gepufferten Zeitbereiche zurück.

SourceBuffer.mode

Steuert, wie die Reihenfolge der Mediensegmente im SourceBuffer gehandhabt wird, in Bezug darauf, ob sie in beliebiger Reihenfolge hinzugefügt werden können oder in strikter Abfolge bleiben müssen.

SourceBuffer.textTracks Schreibgeschützt Experimentell

Eine Liste der aktuell im SourceBuffer enthaltenen Texttracks.

SourceBuffer.timestampOffset

Steuert die Verschiebung, die auf Zeitstempel innerhalb von Mediensegmenten angewendet wird, die anschließend dem SourceBuffer hinzugefügt werden.

SourceBuffer.updating Schreibgeschützt

Ein boolescher Wert, der angibt, ob der SourceBuffer derzeit aktualisiert wird — d.h. ob eine appendBuffer()- oder remove()-Operation derzeit im Gange ist.

SourceBuffer.videoTracks Schreibgeschützt

Eine Liste der aktuell im SourceBuffer enthaltenen Videotracks.

Instanzmethoden

Erbt Methoden von seiner Elternschnittstelle, EventTarget.

SourceBuffer.abort()

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

SourceBuffer.appendBuffer()

Fügt Media-Segmentdaten von einem ArrayBuffer, einem TypedArray oder einem DataView-Objekt in den SourceBuffer ein.

SourceBuffer.appendBufferAsync() Nicht standardisiert Experimentell

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

SourceBuffer.changeType()

Ändert den MIME-Typ, den zukünftige Aufrufe von appendBuffer() erwarten, dass die neuen Daten 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 Buffer-Hinzufügen abgebrochen wird, weil die SourceBuffer.abort()- oder MediaSource.removeSourceBuffer()-Methode aufgerufen wird, während der SourceBuffer.appendBuffer()-Algorithmus noch läuft. SourceBuffer.updating wechselt von true zu false.

error

Wird ausgelöst, wenn ein Fehler während der Verarbeitung einer appendBuffer()-Operation auftritt. SourceBuffer.updating wechselt von true zu false.

update

Wird immer dann ausgelöst, wenn SourceBuffer.appendBuffer() oder SourceBuffer.remove() abgeschlossen ist. SourceBuffer.updating wechselt 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 wechselt von false zu true.

Beispiele

Laden eines Videos in Teilen

Das folgende Beispiel lädt ein Video so schnell wie möglich in Teilen und spielt es ab, sobald es möglich ist.

Sie können den vollständigen Code unter https://github.com/mdn/dom-examples/tree/main/sourcebuffer sehen und die Demo live unter https://mdn.github.io/dom-examples/sourcebuffer/ ausprobieren.

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