css WebVTT字幕中的自定义样式

8xiog9wr 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(317)

是否可以为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>.

在我尝试过的所有浏览器中，world都是以与常规视频线索相同的样式呈现的，即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>)伪类的支持。
为什么world不使用自定义样式进行渲染？是否有解决方法？

css

来源：https://stackoverflow.com/questions/74593425/custom-styling-in-webvtt-subtitles

1条答案

按热度按时间

mklgxw1f1#

它的工作原理与safari、chrome、firefox及其衍生产品的最新版本中所宣传的一样。
浏览器正在积极缓存.vtt文件，缓存清除解决了这个问题。
如www.example.com中所述https://www.w3.org/wiki/VTT_Concepts#Cue_Payload_Tags仅支持三个标签：、和，但也可以通过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>

赞(0）回复(0）举报 2022-12-24

我来回答

css WebVTT字幕中的自定义样式

1条答案

相关问题

热门标签

最新问答