SourceBuffer

Instanzeigenschaften

SourceBuffer.appendWindowEnd

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

SourceBuffer.appendWindowStart

Steuert den Zeitstempel für den Anfang des Anhängefensters. Dies ist ein Zeitstempelbereich, der verwendet werden kann, um zu filtern, welche Mediendaten dem SourceBuffer hinzugefügt werden. Codierte Medienframes mit Zeitstempeln innerhalb dieses Bereichs werden hinzugefügt, während solche außerhalb des Bereichs ausgefiltert werden.

SourceBuffer.audioTracks Schreibgeschützt

Eine Liste der aktuell im SourceBuffer enthaltenen Audiospuren.

SourceBuffer.buffered Schreibgeschützt

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

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 Reihenfolge gehalten werden müssen.

SourceBuffer.textTracks Schreibgeschützt Experimentell

Eine Liste der aktuell im SourceBuffer enthaltenen Textspuren.

SourceBuffer.timestampOffset

Steuert den Offset, der 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 SourceBuffer.appendBuffer()- oder SourceBuffer.remove()-Operation derzeit im Gange ist.

SourceBuffer.videoTracks Schreibgeschützt

Eine Liste der aktuell im SourceBuffer enthaltenen Videospuren.

Instanzmethoden

Erbt Methoden von seiner Elternschnittstelle, EventTarget.

SourceBuffer.abort()

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

SourceBuffer.appendBuffer()

Hängt Mediendatensegmente von einem ArrayBuffer, einem TypedArray oder einem DataView-Objekt an den SourceBuffer an.

SourceBuffer.appendBufferAsync() Nicht standardisiert Experimentell

Startet den Prozess des asynchronen Anhängens des angegebenen 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, 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 SourceBuffer.appendBuffer() durch einen Aufruf von SourceBuffer.abort() beendet wird. SourceBuffer.updating ändert sich von true auf false.

error

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

update

Wird ausgelöst, wenn SourceBuffer.appendBuffer() oder SourceBuffer.remove() abgeschlossen ist. SourceBuffer.updating ändert sich von true auf 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, wenn sich der Wert von SourceBuffer.updating von false auf true ändert.

Beispiele

Ein Video stückweise laden

Das folgende Beispiel lädt ein Video stückweise so schnell wie möglich 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 einsehen 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