SourceBuffer

SourceBuffer.appendWindowEnd

Steuert den Zeitstempel für das Ende des Anhängefensters.

SourceBuffer.appendWindowStart

Steuert den Zeitstempel für den Beginn des Anhängefensters. Dies ist ein Zeitstempelbereich, der verwendet werden kann, um zu filtern, welche Mediendaten an den SourceBuffer angehängt werden. Codierte Medienframes mit Zeitstempeln innerhalb dieses Bereichs werden angehängt, während diejenigen außerhalb des Bereichs herausgefiltert werden.

SourceBuffer.audioTracks Nur lesbar

Eine Liste der Audiotracks, die derzeit im SourceBuffer enthalten sind.

SourceBuffer.buffered Nur lesbar

Gibt die Zeitbereiche zurück, die derzeit im SourceBuffer gepuffert sind.

SourceBuffer.mode

Steuert, wie die Reihenfolge von Mediensegmenten im SourceBuffer gehandhabt wird, ob sie in beliebiger Reihenfolge angehängt werden können oder ob sie in einer strikten Reihenfolge gehalten werden müssen.

SourceBuffer.textTracks Nur lesbar Experimentell

Eine Liste der Textspuren, die derzeit im SourceBuffer enthalten sind.

SourceBuffer.timestampOffset

Steuert den Offset, der auf Zeitstempel innerhalb von Mediensegmenten angewendet wird, die anschließend dem SourceBuffer angehängt werden.

SourceBuffer.updating Nur lesbar

Ein Boolean, der angibt, ob der SourceBuffer derzeit aktualisiert wird, d.h. ob ein SourceBuffer.appendBuffer() oder SourceBuffer.remove()-Vorgang derzeit läuft.

SourceBuffer.videoTracks Nur lesbar

Eine Liste der Videospuren, die derzeit im SourceBuffer enthalten sind.

Erbt Methoden von seiner Elternschnittstelle, EventTarget.

SourceBuffer.abort()

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

SourceBuffer.appendBuffer()

Fügt Mediensegmentdaten aus einem ArrayBuffer, einem TypedArray oder einem DataView-Objekt dem SourceBuffer hinzu.

SourceBuffer.appendBufferAsync() Nicht standardisiert Experimentell

Startet den Vorgang des asynchronen Anfügens des spezifizierten Puffers an den SourceBuffer. Gibt ein Promise zurück, das erfüllt wird, sobald der Puffer angehängt wurde.

SourceBuffer.changeType()

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

SourceBuffer.remove()

Entfernt Mediensegmente innerhalb eines bestimmten Zeitbereichs aus dem SourceBuffer.

SourceBuffer.removeAsync() Nicht standardisiert Experimentell

Startet den Vorgang 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.

abort

Wird jedes Mal ausgelöst, wenn SourceBuffer.appendBuffer() durch einen Aufruf von SourceBuffer.abort() beendet wird. SourceBuffer.updating wechselt von true zu false.

error

Wird jedes Mal ausgelöst, wenn ein Fehler während SourceBuffer.appendBuffer() auftritt. SourceBuffer.updating wechselt von true zu false.

update

Wird jedes Mal ausgelöst, wenn SourceBuffer.appendBuffer() oder SourceBuffer.remove() abgeschlossen ist. SourceBuffer.updating wechselt von true zu false. Dieses Ereignis wird vor updateend ausgelöst.

updateend

Wird ausgelöst, nachdem SourceBuffer.appendBuffer() oder SourceBuffer.remove() endet. Dieses Ereignis wird nach update ausgelöst.

updatestart

Wird jedes Mal ausgelöst, wenn der Wert von SourceBuffer.updating von false zu true wechselt.

Das folgenden Beispiel lädt ein Video so schnell wie möglich stückweise und spielt es ab, sobald es möglich ist.

Den vollständigen Code finden Sie unter https://github.com/mdn/dom-examples/tree/main/sourcebuffer und Sie können 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 mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  const response = await fetch(assetURL);
  const buffer = await response.arrayBuffer();
  sourceBuffer.addEventListener("updateend", () => {
    mediaSource.endOfStream();
    video.play();
    console.log(mediaSource.readyState); // ended
  });
  sourceBuffer.appendBuffer(buffer);
}

const load = document.querySelector("#load");
load.addEventListener("click", loadVideo);

• MediaSource
• SourceBufferList