css WebVTT字幕中文本片段的自定义样式

kknvjkwl  于 2022-12-01  发布在  其他
关注(0)|答案(1)|浏览(214)

是否可以为WebVTT(.vtt)字幕中的特定片段设置自定义样式?
根据mozilla的WebVTT API文档,可以设置CSS伪类,例如:

/* this works ok */
video::cue {
    background-color:rgba(0, 0, 0, 0.8);
    color: rgb(255, 200, 0);
}

/* this does not work! */
video::cue(b) {
  color: red;
}

然后使用以下命令应用.vtt文件中样式:

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

在我尝试过的所有浏览器中,<b>world</b>的渲染样式都与普通视频线索相同。也就是说,video::cue伪类的规则被应用并按预期工作,而video::cue(b)没有任何效果。
我已经尝试在HTML页面的<style/>块以及Mozilla文档中给出的VTT文件本身中定义CSS伪类:

WEBVTT

STYLE
::cue {
    background-color:rgba(0, 0, 0, 0.8);
    color: rgb(255, 200, 0);
}

STYLE
::cue(b) {
  color: red;
}

根据https://caniuse.com/webvtt,现代浏览器支持webvtt,只有Firefox缺少对::cue(<selector>)伪类的支持。
为什么<b>world</b>不使用自定义样式进行渲染?是否有解决方法?

bfhwhh0e

bfhwhh0e1#

它的工作原理就像最新版本的safari,chrome,firefox和衍生产品中所宣传的那样。
浏览器正在积极缓存.vtt文件,缓存清除解决了该问题。
如www.example.com中所述https://www.w3.org/wiki/VTT_Concepts#Cue_Payload_Tags仅支持三个标签:<b><i><u>,但也可以通过类设置样式:
第一个

相关问题