::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 サーバー経由でページを閲覧する必要があります。