【CSS Modules】:playing疑似クラスの使い方
:playing疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:playing擬似クラスは、<audio>や<video>といったHTMLのメディア要素が現在再生中であることを示すCSSセレクターです。この擬似クラスを使用することで、再生状態にあるメディア要素に対して、特別なスタイルを適用することが可能になります。
例えば、Webページに埋め込まれた動画が再生されている間だけ、その動画プレーヤーの枠線を強調表示したり、再生中のオーディオ要素の背景色を変更したりするなど、メディアの状態に応じた視覚的なフィードバックを提供するために利用されます。
具体的には、対象となる<audio>または<video>要素がJavaScriptのplay()メソッドなどで再生を開始し、実際にコンテンツが流れている間に:playing擬似クラスが適用されます。メディアが一時停止（pause()メソッド呼び出しなど）されたり、停止したりすると、この擬似クラスは解除され、代わりに:paused擬似クラスが適用されることがあります。
:playing擬似クラスは、メディアの再生状態をCSS側で直接検知し、その状態に基づいて動的にスタイルを変更するための簡潔かつ強力なメカニズムを提供します。これにより、ユーザーにとってより分かりやすく、インタラクティブなメディア体験をデザインすることができます。この機能は、Web標準の一部として定義されており、主要なモダンブラウザで幅広くサポートされています。
公式リファレンス: :playing
構文(syntax)
1video:playing { 2 outline: 2px solid green; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません