WebVTT字幕的自定义样式

Question

是否可以为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/>块以及VTT文件本身中定义CSS伪类，如Mozilla的文档所示:

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>不呈现自定义样式，是否有解决方案?

Answer 1

它可以像最新版本的safari, chrome, firefox和衍生版本一样工作。

浏览器正在积极缓存.vtt文件，缓存清除解决了这个问题。

如https://www.w3.org/wiki/VTT_Concepts#Cue_Payload_Tags所述，只支持三个标签，<b>,<i>和<u>，但也可以通过CSS类来设置样式:

/* the HTML file containing the video */
video::cue {
background-color: rgba(0, 0, 0, 0.8);
color: #ffc800;
}
video::cue(b) {
color: rgb(51, 216, 18);
font-weight: normal;
}
video::cue(i) {
color: #00bafd;
font-style: normal;
}
video::cue(u) {
text-decoration: none;
color: #ff00ee;
font-style: normal;
}
video::cue(.myclass) {
color: red;
}

WEBVTT
1
00:00:00.000 --> 00:00:11.040
<b>bold</b>
<i>italic</i>
<u>underscored</u>
<c.myclass>Styled</c>