SourceBuffer

SourceBuffer.appendWindowEnd

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

SourceBuffer.appendWindowStart

Kontrolliert den Zeitstempel für den Beginn 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 solche außerhalb des Bereichs herausgefiltert werden.

SourceBuffer.audioTracks Schreibgeschützt

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

SourceBuffer.buffered Schreibgeschützt

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

SourceBuffer.mode

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

SourceBuffer.textTracks Schreibgeschützt Experimentell

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

SourceBuffer.timestampOffset

Kontrolliert den Versatz, der auf Zeitstempel innerhalb von Mediensegmenten angewendet wird, die anschließend dem SourceBuffer hinzugefügt werden.

SourceBuffer.updating Schreibgeschützt

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

SourceBuffer.videoTracks Schreibgeschützt

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

ERBT Methoden von seinem Eltern-Interface, EventTarget.

SourceBuffer.abort()

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

SourceBuffer.appendBuffer()

Fügt Mediendaten aus einem ArrayBuffer, einem TypedArray oder einem DataView-Objekt dem 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, in Übereinstimmung mit den neuen Daten.

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.

abort

Wird ausgelöst, wann immer SourceBuffer.appendBuffer() durch einen Aufruf von SourceBuffer.abort() beendet wird. SourceBuffer.updating ändert sich von true zu false.

error

Wird ausgelöst, wann immer ein Fehler während SourceBuffer.appendBuffer() auftritt. SourceBuffer.updating ändert sich von true zu false.

update

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

updateend

Wird nach dem Ende von SourceBuffer.appendBuffer() oder SourceBuffer.remove() ausgelöst. Dieses Ereignis wird nach update ausgelöst.

updatestart

Wird ausgelöst, wann immer sich der Wert von SourceBuffer.updating von false zu true ändert.

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

Den vollständigen Code finden Sie unter https://github.com/mdn/dom-examples/tree/main/sourcebuffer und das Live-Demo können Sie 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