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

Media element pseudo-classes

メディア要素の再生・一時停止・シーク中・バッファリング中・停止中・ミュート・音量ロック状態に応じたスタイルを適用できる疑似クラスです。JavaScriptなしでメディアプレーヤーのUI状態を視覚的にフィードバックでき、カスタムプレーヤーの構築を簡素化します。

メディア要素再生状態

概要

メディア要素の再生・一時停止・シーク中・バッファリング中・停止中・ミュート・音量ロック状態に応じたスタイルを適用できる疑似クラスです。JavaScriptなしでメディアプレーヤーのUI状態を視覚的にフィードバックでき、カスタムプレーヤーの構築を簡素化します。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 15.4+
Firefox 未対応

モバイル

Chrome Android 未対応
Safari iOS 15.4+
Firefox Android 未対応

基本構文

CSS 
video:playing {
  outline: 2px solid green;
}
video:paused {
  opacity: 0.7;
}
audio:muted {
  filter: grayscale(1);
}

実務での使いどころ

  • メディア再生状態の視覚的フィードバック

    動画の再生中と一時停止中で異なるスタイルを適用し、現在の再生状態をユーザーに視覚的に伝えます。

注意点

  • 2026年3月時点でSafariのみの対応です。クロスブラウザ対応にはJavaScriptでのイベント監視が必要です。

アクセシビリティ

  • 再生状態の変化を色やスタイルだけでなく、aria-liveリージョンで通知するなど、スクリーンリーダーにも伝わる方法を併用してください。

参考リンク