SourceBuffer

Instanzeigenschaften

SourceBuffer.appendWindowEnd

Steuert den Zeitstempel fr das Ende des Append-Fensters.

SourceBuffer.appendWindowStart

Steuert den Zeitstempel fr den Beginn des Append-Fensters. Dies ist ein Zeitstempelbereich, der verwendet werden kann, um zu filtern, welche Mediendaten in den SourceBuffer eingefgt werden. Codierte Medienframes mit Zeitstempeln innerhalb dieses Bereichs werden hinzugefgt, whrend diejenigen auerhalb des Bereichs herausgefiltert werden.

SourceBuffer.audioTracks Schreibgeschtzt

Eine Liste der aktuell im SourceBuffer enthaltenen Audiotracks.

SourceBuffer.buffered Schreibgeschtzt

Gibt die aktuell im SourceBuffer gepufferten Zeitbereiche zurck.

SourceBuffer.mode

Steuert, wie die Reihenfolge der Mediensegmente im SourceBuffer gehandhabt wird, in Bezug darauf, ob sie in beliebiger Reihenfolge hinzugefgt werden knnen oder in strikter Abfolge bleiben mssen.

SourceBuffer.textTracks Schreibgeschtzt

Eine Liste der aktuell im SourceBuffer enthaltenen Texttracks.

SourceBuffer.timestampOffset

Steuert die Verschiebung, die auf Zeitstempel innerhalb von Mediensegmenten angewendet wird, die anschlieend dem SourceBuffer hinzugefgt werden.

SourceBuffer.updating Schreibgeschtzt

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 Schreibgeschtzt

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 zurck.

SourceBuffer.appendBuffer()

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

SourceBuffer.appendBufferAsync()

Startet den Prozess des asynchronen Hinzufgens des angegebenen Buffers zum SourceBuffer. Gibt ein Promise zurck, das erfllt wird, sobald der Buffer hinzugefgt wurde.

SourceBuffer.changeType()

ndert den MIME-Typ, den zuknftige Aufrufe von appendBuffer() erwarten, dass die neuen Daten entsprechen.

SourceBuffer.remove()

Entfernt Mediensegmente innerhalb eines bestimmten Zeitbereichs aus dem SourceBuffer.

SourceBuffer.removeAsync()

Startet den Prozess des asynchronen Entfernens von Mediensegmenten im angegebenen Bereich aus dem SourceBuffer. Gibt ein Promise zurck, das erfllt wird, sobald alle passenden Segmente entfernt wurden.

Ereignisse

abort

Wird ausgelst, wenn das Buffer-Hinzufgen abgebrochen wird, weil die SourceBuffer.abort()- oder MediaSource.removeSourceBuffer()-Methode aufgerufen wird, whrend der SourceBuffer.appendBuffer()-Algorithmus noch luft. SourceBuffer.updating wechselt von true zu false.

error

Wird ausgelst, wenn ein Fehler whrend der Verarbeitung einer appendBuffer()-Operation auftritt. SourceBuffer.updating wechselt von true zu false.

update

Wird immer dann ausgelst, 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 ausgelst. Dieses Ereignis wird nach den Ereignissen update, error oder abort ausgelst.

updatestart

Wird ausgelst, wenn eine appendBuffer() oder remove()-Operation beginnt. updating wechselt von false zu true.

Beispiele

Laden eines Videos in Teilen

Das folgende Beispiel ldt ein Video so schnell wie mglich in Teilen und spielt es ab, sobald es mglich ist.

Sie knnen den vollstndigen 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-Kompatibilitt

Siehe auch

• MediaSource
• SourceBufferList