CSS

::cue

::cueCSS伪元素匹配WebVTT插入所选择的元素中的线索。这可以用于设置VTT轨道媒体中的字幕和其他线索。

只有一小部分CSS属性可以与::cue伪元素一起使用:

  • color

  • opacity

  • visibility

  • text-decoration其手写属性:text-decoration-linetext-decoration-color,和text-decoration-style

  • text-shadow

  • background其手写属性:background-colorbackground-clipbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizebackground-attachment,和background-blend-mode

  • outline其手写属性:outline-coloroutline-styleoutline-width

  • font和它的普通写法属性:font-kerningfont-stylefont-variantfont-variant-numericfont-variant-positionfont-variant-east-asianfont-variant-capsfont-variant-alternatesfont-variant-ligaturesfont-synthesisfont-feature-settingsfont-language-overridefont-weightfont-sizefont-size-adjustfont-stretch,和font-family

  • line-height

  • white-space

  • text-combine-upright

  • ruby-position

这些属性应用于整个cues集,就好像它们是一个单元一样。唯一的例外是background它的速记属性可以单独应用于每个提示,以避免创建盒子并且意外地遮蔽媒体的大部分区域。

语法

::cue | ::cue( <selector> )

下面的CSS设置提示样式,以便文本是白色的,背景是半透明的黑匣子。

::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6 }

规范

SpecificationStatusComment
WebVTT: The Web Video Text Tracks FormatDraftInitial definition

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support(Yes)?551No??

FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support???55No??