Widely available Useful for observability, quality monitoring, and debugging when media fidelity matters to the product.

Media playback quality

The HTMLVideoElement method getVideoPlaybackQuality() creates and returns a VideoPlaybackQuality object containing metrics including how many frames have been lost.

The data returned can be used to evaluate the quality of the video stream.

MediaPerformanceVideo

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
VideoPlaybackQuality
23
12
42
8
25
12.2
getVideoPlaybackQuality

The HTMLVideoElement method getVideoPlaybackQuality() creates and returns a VideoPlaybackQuality object containing metrics including how many frames have been lost.
80
12
42
8
80
12.2
creationTime

The read-only creationTime property on the VideoPlaybackQuality interface reports the number of milliseconds since the browsing context was created this quality sample was recorded.
23
12
42
8
25
12.2
droppedVideoFrames

The read-only droppedVideoFrames property of the VideoPlaybackQuality interface returns the number of video frames which have been dropped rather than being displayed since the last time the media was loaded into the HTMLVideoElement.
23
12
42
8
25
12.2
totalVideoFrames

The VideoPlaybackQuality interface's totalVideoFrames read-only property returns the total number of video frames that have been displayed or dropped since the media was loaded.
23
12
42
8
25
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
const video = document.querySelector('video');
const quality = video.getVideoPlaybackQuality();
console.log('Total frames:', quality.totalVideoFrames);
console.log('Dropped frames:', quality.droppedVideoFrames);

Live demo

Playback quality metrics

Summarize the fields exposed by media playback quality reporting.

PreviewFullscreen

Quality troubleshooting

Explain when dropped frame data is useful for diagnosing playback issues.

PreviewFullscreen

Monitoring checklist

Pair quality metrics with the other signals often checked during media debugging.

PreviewFullscreen

Use cases

  • Playback diagnostics

    Measure frame drops and playback quality when tuning video delivery or rendering performance.

  • Support investigation

    Surface playback health data in debugging tools when users report stutter or visual degradation.

Cautions

  • Diagnostics tell you that playback quality changed, not automatically why it changed.
  • Collect only the telemetry you truly need and handle playback metrics as product analytics data.

Accessibility

  • Poor playback quality can undermine captions, sign language video, and other accessible media experiences.
  • If you detect degraded playback, provide controls or guidance that help users recover a usable experience.

Related links