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

Media element pseudo-classes

:buffering は CSS の擬似クラスセレクターで、再生可能な要素（<audio> や <video> など）がメディアリソースをバッファリングしているときに、その要素が再生可能であることを表します。

要素は、メディアデータの読み込みを試みているが、再生を開始または継続するのに十分なデータがまだ存在しないために再生を続けることができない場合、バッファリング中であるとみなされます。詳細については、「メディアのバッファリング、シーク、および時間範囲のガイド」をご覧ください。

メモ: 要素が「バッファリング」の時は、 :playing ともみなされます。 :buffering が要素に一致する場合、 :playing もその要素に一致します。

メディア要素再生状態

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:buffering`			150	15.4		15.4
その他
`css.selectors.muted` `:ミュート`			150	15.4		15.4
`css.selectors.paused` `:一時停止`			150	15.4		15.4
`css.selectors.playing` `:遊んでます`			150	15.4		15.4
`css.selectors.seeking` `:探しています`			150	15.4		15.4
`css.selectors.stalled` `:停止`			150	15.4		15.4
`css.selectors.volume-locked` `:ボリュームロック`			150	15.4		15.4

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS playing demo.

CSS one timeStop demo.

CSS myu-t demo.