是否可以为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>
不使用自定义样式进行渲染?是否有解决方法?
1条答案
按热度按时间bfhwhh0e1#
它的工作原理就像最新版本的safari,chrome,firefox和衍生产品中所宣传的那样。
浏览器正在积极缓存
.vtt
文件,缓存清除解决了该问题。如www.example.com中所述https://www.w3.org/wiki/VTT_Concepts#Cue_Payload_Tags仅支持三个标签:
<b>
、<i>
和<u>
,但也可以通过类设置样式:第一个