備忘録的プログラミングリファレンス

::cue エレメント

 ::cue エレメントは、<video> エレメントといったメディアに付ける字幕や注釈といったテキストトラックを定義する WebVTT に関する疑似エレメントです。
 字幕や注釈といったテキストトラックにスタイルを指定することができます。

::cue{
	color: lime;
	background-color: black;
}

詳しくはExampleを参照してください

 テキストトラックを作成するには、WebVTT 用の.vttファイルを作成し <video> の中の <track> の src 属性で読み込みます。

 その他の疑似エレメントについては疑似エレメントを参照してください。

 WebVTTについてはWebVTT の作成を参照してください。

ページ内 Index

構文(Syntax)

CSS

HTMLElement::cue {
  /* style propaties */
}

DOM ( JavaScript )

 疑似エレメントはDOM ( JavaScript )から操作できません。
 擬似エレメントを利用したほうが簡易です。

Example

 ::cue 疑似エレメントの例です。

 この例の動画は、Pexelsのarvin latifiによる動画を拝借しました。

 ローカルで開発する際の注意点として、.vttといったファイルはセキュリティーの観点から読み込みエラーが出ます。web サーバー経由でページを閲覧する必要があります。