Media playback quality
HTMLVideoElement の getVideoPlaybackQuality() メソッドは、どれだけのフレームが落ちるのかを示す指標を含む VideoPlaybackQuality オブジェクトを返します。
返されるデータは、動画ストリームの品質を評価するために使用することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 23 | 12 | 42 | 8 | 25 | 12.2 | |
| HTMLVideoElement の getVideoPlaybackQuality() メソッドは、どれだけのフレームが落ちるのかを示す指標を含む VideoPlaybackQuality オブジェクトを返します。 | 80 | 12 | 42 | 8 | 80 | 12.2 |
| VideoPlaybackQualityインターフェイスの読み取り専用のcreationTimeプロパティは、この品質サンプルが記録されたブラウズコンテキストが作成されてからのミリ秒数を報告します。 | 23 | 12 | 42 | 8 | 25 | 12.2 |
| VideoPlaybackQuality インターフェースの読み取り専用の droppedVideoFrames プロパティは、メディアが HTMLVideoElement に最後に読み込まれてから、表示されずにドロップされたビデオ フレームの数を返します。 | 23 | 12 | 42 | 8 | 25 | 12.2 |
| VideoPlaybackQuality インターフェースの totalVideoFrames は、読み取り専用のプロパティで、メディアが読み込まれてから表示またはドロップされたビデオフレームの総数を返します。 | 23 | 12 | 42 | 8 | 25 | 12.2 |
基本構文
const video = document.querySelector('video');
const quality = video.getVideoPlaybackQuality();
console.log('Total frames:', quality.totalVideoFrames);
console.log('Dropped frames:', quality.droppedVideoFrames);ライブデモ
Quality troubleshooting
Explain when dropped frame data is useful for diagnosing playback issues.
Monitoring checklist
Pair quality metrics with the other signals often checked during media debugging.
実務での使いどころ
-
Media playback quality の活用
HTMLVideoElement の getVideoPlaybackQuality() メソッドは、どれだけのフレームが落ちるのかを示す指標を含む VideoPlaybackQuality オブジェクトを返します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。