SourceBuffer.appendWindowEnd — Eigenschaft · JavaScript-Referenz

Signatur

SourceBuffer.appendWindowEnd

Beschreibung

Die Eigenschaft appendWindowEnd gehört zum SourceBuffer-Interface der Media Source Extensions (MSE). Zusammen mit appendWindowStart bildet sie das Append-Fenster. Das ist ein Zeitbereich in der Präsentationszeitachse. Nur codierte Frames, deren Präsentationszeitstempel innerhalb dieses Bereichs liegen, übernimmt der Puffer bei appendBuffer(). Frames außerhalb des Fensters werden stillschweigend verworfen.

Der Wert ist eine Gleitkommazahl in Sekunden. Der Standardwert ist Infinity, es wird also standardmäßig nichts am Ende abgeschnitten. Wenn Sie einen endlichen Wert setzen, können Sie ein Segment gezielt kürzen. Typische Fälle sind Werbeeinblendungen, das Zusammenschneiden mehrerer Clips zu einer nahtlosen Wiedergabe oder das Weglassen von überstehendem Material am Ende eines Segments.

Die Eigenschaft wirkt nur auf zukünftige Aufrufe von appendBuffer(). Bereits gepufferte Daten ändert sie nicht, dafür gibt es SourceBuffer.remove(). Der Wert darf nur gesetzt werden, solange der Puffer nicht aktualisiert wird (updating === false). Er muss außerdem größer als appendWindowStart sein.

Parameter

Name	Typ	Default	Beschreibung
$value	number	Infinity	Neuer Endzeitpunkt des Append-Fensters in Sekunden. Der Wert muss größer als `appendWindowStart` sein und darf nicht `NaN` sein. `Infinity` ist erlaubt.

Rückgabewert

Typ

number

Beschreibung

Der aktuelle Endzeitstempel des Append-Fensters in Sekunden (Gleitkommazahl). Der Standardwert ist Infinity.

Beispiele

Standardwert auslesen und Fenster setzen

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sb = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  console.log(sb.appendWindowEnd); // Standard

  // Nur die ersten 10 Sekunden übernehmen
  sb.appendWindowStart = 0;
  sb.appendWindowEnd = 10;
  console.log(sb.appendWindowEnd);
});

Infinity 10

Segment beim Anhängen auf einen Bereich zuschneiden

const appendTrimmed = async (sourceBuffer, url, start, end) => {
  const data = await (await fetch(url)).arrayBuffer();

  // Warten, bis keine Aktualisierung mehr läuft
  if (sourceBuffer.updating) {
    await new Promise((r) => sourceBuffer.addEventListener('updateend', r, { once: true }));
  }

  // Reihenfolge beachten: erst das Ende weit genug setzen, dann den Start
  sourceBuffer.appendWindowEnd = Infinity;
  sourceBuffer.appendWindowStart = start;
  sourceBuffer.appendWindowEnd = end;

  sourceBuffer.appendBuffer(data);
  await new Promise((r) => sourceBuffer.addEventListener('updateend', r, { once: true }));
  console.log(`Gepuffert bis ${sourceBuffer.buffered.end(0).toFixed(2)} s`);
};

// Aufruf, z. B. im sourceopen-Handler:
// await appendTrimmed(sb, '/media/intro.mp4', 0, 5);

Gepuffert bis 5.00 s (ungefähr, je nach Frame-Grenzen)

Fehlerfälle abfangen

mediaSource.addEventListener('sourceopen', () => {
  const sb = mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
  sb.appendWindowStart = 20;

  try {
    sb.appendWindowEnd = 15; // kleiner als appendWindowStart
  } catch (err) {
    console.log(err.name);
  }

  try {
    sb.appendWindowEnd = NaN;
  } catch (err) {
    console.log(err.name);
  }
});

TypeError TypeError

// Wichtig · Fallstricke

TypeError: Diesen Fehler löst das Setzen aus, wenn der Wert NaN ist oder kleiner bzw. gleich appendWindowStart. Beim Verschieben des Fensters kommt es deshalb auf die Reihenfolge der Zuweisungen an. Setzen Sie im Zweifel zuerst appendWindowEnd = Infinity.
InvalidStateError: Diesen Fehler löst das Setzen aus, wenn der SourceBuffer aus MediaSource.sourceBuffers entfernt wurde oder updating gerade true ist. Warten Sie also vorher auf das Ereignis updateend.
Das Abschneiden erfolgt an Frame-Grenzen. Bei Video mit Abhängigkeiten zwischen Frames (GOPs) kann das tatsächliche Pufferende etwas vom gewünschten Wert abweichen. Bei Audio ist das Verhalten der Browser teils unterschiedlich: Manche schneiden sehr genau, andere verwerfen ganze Frames.
Bereits gepufferte Daten bleiben unverändert. Um sie zu kürzen, rufen Sie remove(start, end) auf.
Der Wert wird zusammen mit timestampOffset ausgewertet: Das Fenster bezieht sich auf die Präsentationszeit nach dem Offset.
Kompatibilität: Die Eigenschaft wird in Chrome, Edge, Firefox und Safari (macOS/iPadOS) unterstützt. Auf dem iPhone steht MSE erst ab iOS 17.1 über ManagedMediaSource zur Verfügung. Web Worker unterstützen MSE nur in einigen Browsern.

Siehe auch

SourceBuffer SourceBuffer.appendWindowStart SourceBuffer.appendBuffer() SourceBuffer.timestampOffset SourceBuffer.remove() SourceBuffer.updating MediaSource