试一试
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 |
浏览器兼容性
加载中…