試一試
video {
width: 100%;
}
video::cue {
font-size: 1rem;
color: yellow;
}
::cue(u) {
color: red;
}
<video controls src="/shared-assets/videos/friday.mp4">
<track
default
kind="captions"
srclang="en"
src="/shared-assets/misc/friday.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
這些屬性將應用於整個提示集，就像它們是一個單元一樣。唯一的例外是 background 及其長格式屬性分別應用於每個提示，以避免建立框並意外遮蓋媒體的大面積區域。
語法
css
::cue | ::cue(<selector>) {
/* ... */
}
允許的屬性
其選擇器包含此元素的規則只能使用以下 CSS 屬性
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizecolorfontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-heightopacityoutlineoutline-coloroutline-styleoutline-widthruby-positiontext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-shadowvisibilitywhite-space
示例
將 WebVTT 提示樣式設定為白底黑字
以下 CSS 設定提示樣式，使文字為白色，背景為半透明黑框。
css
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
設定 WebVTT 內部節點物件的樣式
提示文字可以包含內部節點物件作為標籤（類似於 HTML 元素）<c>、<i>、<b>、<u>、<ruby>、<rt>、<v> 和 <lang>。::cue() 選擇器可用於將樣式應用於這些標籤內的內容，以自定義 WebVTT 軌道的顯示方式。考慮以下使用 <u> 標籤下劃線文字的提示文字
00:00:01.500 --> 00:00:02.999 line:80% Tell me, is the <u>lord of the universe</u> in?
以下 CSS 規則使用顏色和 text-decoration 自定義 <u> 標籤內的文字
css
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
規範
| 規範 |
|---|
| WebVTT：網頁影片文字軌道格式 # the-cue-pseudo-element |
瀏覽器相容性
載入中…