Time-relative pseudo-selectors

概要

時間相対セレクターはビデオやオーディオのキャプション・字幕において、再生済みのキューと未再生のキューを異なるスタイルで表示するために使用します。カラオケ風のテキスト表示やインタラクティブな字幕表示を実現できます。WebVTTと組み合わせて使用されます。

対応ブラウザ

基本構文

::cue:past {
  color: gray;
  opacity: 0.5;
}
::cue:future {
  color: white;
}

実務での使いどころ

• カラオケ風字幕

  再生済みの字幕テキストをグレーアウトし、現在位置を視覚的に明確にするカラオケ風表示を実現します。

注意点

アクセシビリティ

• 過去のキューの色やopacityを変更する際は、依然として読みやすいコントラスト比を維持してください。

参考リンク

• MDN Web Docs — Time-relative pseudo-selectors