Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Media playback quality

HTMLVideoElement の getVideoPlaybackQuality() メソッドは、どれだけのフレームが落ちるのかを示す指標を含む VideoPlaybackQuality オブジェクトを返します。

返されるデータは、動画ストリームの品質を評価するために使用することができます。

メディア

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
VideoPlaybackQuality
23
12
42
8
25
12.2
getVideoPlaybackQuality

HTMLVideoElement の getVideoPlaybackQuality() メソッドは、どれだけのフレームが落ちるのかを示す指標を含む VideoPlaybackQuality オブジェクトを返します。
80
12
42
8
80
12.2
creationTime

VideoPlaybackQualityインターフェイスの読み取り専用のcreationTimeプロパティは、この品質サンプルが記録されたブラウズコンテキストが作成されてからのミリ秒数を報告します。
23
12
42
8
25
12.2
droppedVideoFrames

VideoPlaybackQuality インターフェースの読み取り専用の droppedVideoFrames プロパティは、メディアが HTMLVideoElement に最後に読み込まれてから、表示されずにドロップされたビデオ フレームの数を返します。
23
12
42
8
25
12.2
totalVideoFrames

VideoPlaybackQuality インターフェースの totalVideoFrames は、読み取り専用のプロパティで、メディアが読み込まれてから表示またはドロップされたビデオフレームの総数を返します。
23
12
42
8
25
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
const videoElem = document.getElementById("my_vid");
const counterElem = document.getElementById("counter");
const quality = videoElem.getVideoPlaybackQuality();

counterElem.innerText = quality.totalVideoFrames;

実務での使いどころ

  • Media playback quality の活用

    HTMLVideoElement の getVideoPlaybackQuality() メソッドは、どれだけのフレームが落ちるのかを示す指標を含む VideoPlaybackQuality オブジェクトを返します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク