样式化 VTT 提示 - ::cue(#id) 选择器不起作用

Question

我试图通过尝试定位提示 ID 来设置动态添加的 VTT 提示的样式：

track = video.addTextTrack('captions', 'Captions', 'en');
track.mode = 'showing';

const cue = new VTTCue(0, 10, "Hello world");
cue.id = 'test';
track.addCue(cue);

console.log("ID:", track.cues[0].id)

/* This selector does not work */

::cue(#test) {
  color: red;
}


/* The generic selector works */

::cue {
  background-color: orange;
}

<video id="video" muted autoplay controls width="400px">
  <source type="video/mp4"
          src="https://upload.wikimedia.org/wikipedia/commons/4/46/Panorama_of_the_valley_from_Leh_Palace.webm">     </source>
</video>

我极度简化了示例，但它显示了问题所在。我不确定我做错了什么，我试图遵循 W3C 规范： https://w3c.github.io/webvtt/#introduction-other-features

In this example, the cues have an identifier:

WEBVTT

test

00:00.000 --> 00:02.000 This is a test.

123 00:00.000 --> 00:02.000 That’s an, an, that’s an L!

crédit de transcription 00:04.000 --> 00:05.000 Transcrit par Célestes™ This allows a style sheet to specifically target the cues.

/* style for cue: test */ ::cue(#test) { color: lime; } Due to the syntax rules of CSS, some characters need to be escaped with CSS character escape sequences. For example, an ID that starts with a number 0-9 needs to be escaped. The ID 123 can be represented as " 23" (31 refers to the Unicode code point for "1"). See Using character escapes in markup and CSS for more information on CSS escapes.

/* style for cue: 123 / ::cue(# 23) { color: lime; } / style for cue: crédit de transcription */ ::cue(#crédit\ de\ transcription) { color: red; }

我不知道 id 选择器是否只适用于 .vtt 文件，而不适用于通过 JS 生成的提示。关于 VTT 的信息仍然不多，因为它仍然是一项正在进行的技术，我尝试了不同的方法，甚至使用 vtt.js 来解析包含内联 ::cue 样式的 VTT 字符串，但这不起作用要么。

Answer 1

您可以在 VTT 文本中使用 class object。

但是需要修改每个VTT对象的text属性。

那么您的 css 规则将被应用。

track = video.addTextTrack('captions', 'Captions', 'en');
track.mode = 'showing';

// wrap text in <c> txt </c>
const cue = new VTTCue(0, 10, "<c>Hello world</c>");
cue.id = "test";
track.addCue(cue);

::cue(#test) {
  color: red;
}
::cue {
  background-color: orange;
}

<video id="video" muted autoplay controls width="400px">
  <source type="video/mp4"
          src="https://upload.wikimedia.org/wikipedia/commons/4/46/Panorama_of_the_valley_from_Leh_Palace.webm">     </source>
</video>

样式化 VTT 提示 - ::cue(#id) 选择器不起作用

Styling VTT cues - ::cue(#id) selector does not work

javascript

video

webvtt

video-subtitles

vtt