VideoPlaybackQuality.totalVideoFrames — Eigenschaft · JavaScript-Referenz

Signatur

VideoPlaybackQuality.totalVideoFrames

Beschreibung

Die schreibgeschützte Eigenschaft totalVideoFrames eines VideoPlaybackQuality-Objekts gibt an, wie viele Video-Frames seit dem Laden des Mediums insgesamt verarbeitet wurden. Mitgezählt werden sowohl angezeigte als auch verworfene Frames. Das Objekt bekommst du über HTMLVideoElement.prototype.getVideoPlaybackQuality().

Allein ist der Wert wenig aussagekräftig. Richtig nützlich wird er zusammen mit droppedVideoFrames: Das Verhältnis droppedVideoFrames / totalVideoFrames ist ein guter Messwert für die Wiedergabequalität. Adaptive Player (etwa für Media Source Extensions) nutzen diesen Wert, um bei zu vielen verworfenen Frames auf eine niedrigere Auflösung oder Bitrate umzuschalten.

Wichtig: Ein VideoPlaybackQuality-Objekt ist eine Momentaufnahme. Die Werte werden danach nicht mehr aktualisiert. Für eine laufende Überwachung musst du getVideoPlaybackQuality() also regelmäßig neu aufrufen.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative ganze Zahl (unsigned long): Gesamtzahl der angezeigten und verworfenen Frames seit dem Laden des Mediums. Vor dem Start der Wiedergabe ist der Wert 0.

Beispiele

Verworfene Frames in Prozent berechnen

const video = document.querySelector('video');

const quality = video.getVideoPlaybackQuality();
const { totalVideoFrames, droppedVideoFrames } = quality;

// Division durch 0 vermeiden, falls noch nichts abgespielt wurde
const dropRate = totalVideoFrames > 0
  ? (droppedVideoFrames / totalVideoFrames) * 100
  : 0;

console.log(`Frames gesamt: ${totalVideoFrames}`);
console.log(`Verworfen: ${dropRate.toFixed(2)} %`);

Frames gesamt: 1500 Verworfen: 1.20 %

Wiedergabequalität laufend überwachen und Qualität reduzieren

const video = document.querySelector('video');
let last = { total: 0, dropped: 0 };

const checkQuality = () => {
  const q = video.getVideoPlaybackQuality(); // neue Momentaufnahme
  const deltaTotal = q.totalVideoFrames - last.total;
  const deltaDropped = q.droppedVideoFrames - last.dropped;
  last = { total: q.totalVideoFrames, dropped: q.droppedVideoFrames };

  if (deltaTotal > 0 && deltaDropped / deltaTotal > 0.1) {
    console.warn('Über 10 % verworfene Frames – niedrigere Qualität wählen');
    // z. B. player.setQuality('480p');
  }
};

const intervalId = setInterval(checkQuality, 2000);
video.addEventListener('ended', () => clearInterval(intervalId));

Über 10 % verworfene Frames – niedrigere Qualität wählen

Feature-Erkennung mit Fallback

const getTotalFrames = (video) => {
  if (typeof video.getVideoPlaybackQuality === 'function') {
    return video.getVideoPlaybackQuality().totalVideoFrames;
  }
  // Veralteter WebKit-Fallback
  return video.webkitDecodedFrameCount ?? null;
};

console.log(getTotalFrames(document.querySelector('video')));

842

// Wichtig · Fallstricke

Momentaufnahme: Die Werte ändern sich nach dem Aufruf von getVideoPlaybackQuality() nicht mehr. Wer ein zwischengespeichertes Objekt immer wieder abfragt, bekommt jedes Mal dieselbe Zahl.
Division durch 0: Vor dem Start der Wiedergabe ist totalVideoFrames gleich 0. Prüfe das, bevor du eine Quote berechnest, sonst erhältst du NaN.
Kumulativ: Der Zähler zählt seit dem Laden des Mediums immer weiter. Aussagen über die aktuelle Qualität liefern deshalb eher Differenzen zwischen zwei Messungen. Wird src neu gesetzt, beginnt der Zähler in der Regel wieder bei null.
Browser-Unterschiede: Wie genau gezählt wird, hängt von der Implementierung ab, z. B. bei pausierten Videos, Hardware-Dekodierung oder Hintergrund-Tabs. Die Werte sind daher nur eingeschränkt zwischen Browsern vergleichbar.
Kompatibilität: Wird in allen modernen Browsern unterstützt. Die Eigenschaft corruptedVideoFrames desselben Interfaces gilt als veraltet. Ältere WebKit-Browser boten stattdessen webkitDecodedFrameCount an.

Siehe auch

VideoPlaybackQuality.corruptedVideoFrames VideoPlaybackQuality.totalFrameDelay VideoPlaybackQuality.droppedVideoFrames VideoPlaybackQuality.creationTime AudioPlaybackStats.totalDuration