video-dynamic-range media query | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

概要

video-dynamic-range メディアクエリはデバイスがHDR（High Dynamic Range）映像を表示できるかどうかを検出します。standard と high の値があり、HDR対応デバイスで最適化されたビデオプレーヤーのUIを提供できます。非視覚デバイスではどちらの値にもマッチしません。

対応ブラウザ

デスクトップ

Chrome 未対応

Edge 未対応

Safari 未対応

Firefox 100+

モバイル

Chrome Android 未対応

Safari iOS 未対応

Firefox Android 100+

基本構文

CSS

@media (video-dynamic-range: high) {
  .video-player {
    background: #000;
  }
}

実務での使いどころ

HDR対応ビデオプレーヤー

HDR対応デバイスで映像の品質を最大限に引き出すため、プレーヤーの背景やUIを最適化します。

注意点

Firefox のみでサポートされており、他のブラウザでは機能しません。dynamic-range メディアクエリの方が幅広くサポートされています。

参考リンク

MDN Web Docs — video-dynamic-range media query

概要