CSS":playing"でWebページをもっとスマートに：メディア再生状況に応じたスタイル変更のテクニック

注記
:playing セレクターは比較的新しい機能であり、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザとの互換性を考慮する必要がある場合は、JavaScript を使用して同様の機能を実現する方法を検討する必要があります。

以下の例は、video 要素が再生されている場合にのみ背景色を変更する CSS ルールを示しています。

video:playing {
  background-color: #00FF00;
}

:playing セレクターの利点

:playing セレクターを使用する利点は次のとおりです。

• JavaScript を使用せずに、インタラクティブなメディア体験を作成することができます。
• ユーザーの操作に依存せずに、メディアが再生されているかどうかを検出することができます。
• メディアの再生状態に基づいて動的にスタイルを適用することができます。

以下の例は、:playing セレクターを使用して、再生中の動画にコントロールパネルを表示する方法を示しています。

<video id="myVideo">
  <source src="video.mp4" type="video/mp4">
</video>

<div id="controls">
  <button>再生</button>
  <button>一時停止</button>
  <button>ミュート</button>
</div>

#myVideo:playing + #controls {
  display: block;
}

この CSS ルールは、myVideo という ID を持つ video 要素が再生されている場合にのみ、controls という ID を持つ div 要素を表示します。

---

例 1: ビデオが再生されている場合にビデオの背景色を変更する

<video id="myVideo" src="video.mp4" controls>
</video>

<style>
  video:playing {
    background-color: #00FF00;
  }
</style>

このコードは、myVideo という ID を持つ video 要素が再生されている場合に、その背景色を緑色に変更します。

例 2: オーディオが再生されている場合にオーディオプレーヤーの再生ボタンを非表示にする

<audio id="myAudio" src="audio.mp3" controls>
</audio>

<style>
  audio:playing #playButton {
    display: none;
  }
</style>

このコードは、myAudio という ID を持つ audio 要素が再生されている場合、playButton という ID を持つボタンを非表示にします。

<video id="myVideo" src="video.mp4">
  <source src="video.mp4" type="video/mp4">
</video>

<div id="controls">
  <button>再生</button>
  <button>一時停止</button>
  <button>ミュート</button>
</div>

<style>
  #myVideo:playing + #controls {
    display: block;
  }
</style>

---

JavaScript を使用する

JavaScript を使用して、メディア要素が再生されているかどうかを検出することができます。以下の例は、video 要素が再生されている場合に背景色を変更する方法を示しています。

<video id="myVideo" src="video.mp4"></video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('playing', function() {
    video.style.backgroundColor = '#00FF00';
  });

  video.addEventListener('ended', function() {
    video.style.backgroundColor = '';
  });
</script>

:hover セレクターと autoplay 属性を使用する

古いブラウザでは、:playing セレクターがサポートされていない場合がありますが、:hover セレクターと autoplay 属性を組み合わせて同様の効果を得ることができます。以下の例は、マウスカーソルが video 要素の上に置かれた場合にのみ背景色を変更する方法を示しています。

<video id="myVideo" src="video.mp4" autoplay></video>

<style>
  video:hover {
    background-color: #00FF00;
  }
</style>

注記
autoplay 属性を使用すると、ユーザーの同意なしに動画が自動的に再生されます。これは、ユーザーにとって望ましくない場合がありますので、注意して使用してください。

カスタムイベントを使用する

play および pause イベントをトリガーするカスタムイベントを作成して、メディアの再生状態を検出することができます。以下の例は、video 要素が再生されている場合にのみ背景色を変更する方法を示しています。

<video id="myVideo" src="video.mp4"></video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('play', function() {
    video.dispatchEvent(new Event('playing'));
  });

  video.addEventListener('pause', function() {
    video.dispatchEvent(new Event('paused'));
  });

  video.addEventListener('playing', function() {
    video.style.backgroundColor = '#00FF00';
  });

  video.addEventListener('paused', function() {
    video.style.backgroundColor = '';
  });
</script>

ライブラリを使用する

:playing セレクターの機能をエミュレートする JavaScript ライブラリがいくつかあります。これらのライブラリを使用すると、古いブラウザでも :playing セレクターと同様に動作させることができます。