SourceBuffer - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

SourceBuffer

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.

Das SourceBuffer-Interface repräsentiert ein Medienstück, das über ein HTMLMediaElement und ein MediaSource-Objekt weitergegeben und abgespielt werden soll. Dieses kann aus einem oder mehreren Mediensegmenten bestehen.

EventTarget SourceBuffer

In diesem Artikel

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

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()

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()

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.

js
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);

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Media Source API
SourceBuffer
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
1. EventTarget
Verwandte Seiten für Media Source Extensions
Anleitungen
1. Transkodierung von Medien für Media Source Extensions
2. DASH Adaptive Streaming für HTML-Video