VideoPlaybackQuality.creationTime — Eigenschaft · JavaScript-Referenz

Signatur

VideoPlaybackQuality.creationTime

Beschreibung

Die Eigenschaft creationTime eines VideoPlaybackQuality-Objekts gibt an, wann die Momentaufnahme der Wiedergabequalität erstellt wurde. Das Objekt bekommst du über HTMLVideoElement.prototype.getVideoPlaybackQuality(). Der Wert ist ein DOMHighResTimeStamp, also eine Zahl in Millisekunden, oft mit Nachkommastellen. Er bezieht sich auf dieselbe Zeitbasis wie performance.now(), nämlich den Start des Browsing-Kontexts (performance.timeOrigin).

Jeder Aufruf von getVideoPlaybackQuality() liefert ein neues, unveränderliches Objekt. Die Zähler darin (totalVideoFrames, droppedVideoFrames) sind kumulativ. Mit creationTime kannst du deshalb zwei Proben zeitlich einordnen und daraus Raten berechnen, etwa verworfene Bilder pro Sekunde oder die tatsächliche Bildrate in einem Zeitfenster.

Typische Einsatzfälle sind Überwachung der Wiedergabequalität (Quality of Experience), adaptives Streaming, z. B. auf eine niedrigere Auflösung wechseln, wenn zu viele Bilder verworfen werden, und das Senden von Telemetriedaten an einen Analyse-Server.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Millisekunden seit performance.timeOrigin zum Zeitpunkt, an dem die Qualitätsprobe erstellt wurde. Schreibgeschützt.

Beispiele

Zeitstempel einer Qualitätsprobe auslesen

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

console.log(`Probe erstellt nach ${quality.creationTime.toFixed(1)} ms`);
console.log(`Frames gesamt: ${quality.totalVideoFrames}`);
console.log(`Verworfen: ${quality.droppedVideoFrames}`);

Probe erstellt nach 15234.7 ms Frames gesamt: 812 Verworfen: 3

Verworfene Frames pro Sekunde zwischen zwei Proben

const video = document.querySelector('video');
let previous = video.getVideoPlaybackQuality();

setInterval(() => {
  const current = video.getVideoPlaybackQuality();
  const seconds = (current.creationTime - previous.creationTime) / 1000;
  const dropped = current.droppedVideoFrames - previous.droppedVideoFrames;
  const rendered = current.totalVideoFrames - previous.totalVideoFrames;

  if (seconds > 0) {
    console.log(`Drop-Rate: ${(dropped / seconds).toFixed(2)}/s, FPS: ${(rendered / seconds).toFixed(1)}`);
  }
  previous = current;
}, 2000);

Drop-Rate: 0.50/s, FPS: 29.8

Qualitätsprobe mit absolutem Zeitstempel an Telemetrie senden

const reportQuality = (video) => {
  const q = video.getVideoPlaybackQuality();
  // Relative Zeit in eine Unix-Zeit (ms) umrechnen
  const timestamp = Math.round(performance.timeOrigin + q.creationTime);

  const payload = {
    timestamp,
    iso: new Date(timestamp).toISOString(),
    total: q.totalVideoFrames,
    dropped: q.droppedVideoFrames
  };
  navigator.sendBeacon('/api/video-qoe', JSON.stringify(payload));
  return payload;
};

const video = document.querySelector('video');
video.addEventListener('pause', () => console.log(reportQuality(video)));

{ timestamp: 1718000000123, iso: '2024-06-10T06:13:20.123Z', total: 1500, dropped: 12 }

// Wichtig · Fallstricke

Relative Zeitbasis: creationTime ist kein Unix-Zeitstempel. Für eine absolute Zeit musst du performance.timeOrigin + creationTime rechnen. Werte aus verschiedenen Tabs oder Workern kannst du nicht direkt vergleichen.
Reduzierte Genauigkeit: Zum Schutz vor Timing-Angriffen und Fingerprinting (Spectre) runden Browser hochauflösende Zeitstempel. Firefox rundet z. B. abhängig von privacy.reduceTimerPrecision bzw. Cross-Origin-Isolation. Für Millisekunden-genaue Messungen ist die Eigenschaft deshalb nur bedingt geeignet.
Momentaufnahme: Das Objekt aktualisiert sich nicht von selbst. Für neue Werte rufst du getVideoPlaybackQuality() erneut auf.
Kompatibilität: Wird von allen modernen Browsern unterstützt, nur auf HTMLVideoElement (nicht auf <audio>). Die veraltete Eigenschaft corruptedVideoFrames und die präfixierten Zähler wie webkitDroppedFrameCount solltest du nicht mehr verwenden.

Siehe auch

Performance.now() PerformanceSoftNavigation.presentationTime VideoPlaybackQuality.totalVideoFrames VideoPlaybackQuality.droppedVideoFrames VideoPlaybackQuality.corruptedVideoFrames