Estoy tratando de diseñar señales VTT agregadas dinámicamente tratando de apuntar a la identificación de la señal:

 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>

Simplifiqué extremadamente el ejemplo, pero muestra el problema. No estoy seguro de lo que estoy haciendo mal, traté de seguir las especificaciones de W3C: https://w3c.github.io/webvtt/#introduction-other-features

En este ejemplo, las señales tienen un identificador:

WEBVTT

prueba

00:00.000 --> 00:02.000 Esto es una prueba.

123 00:00.000 --> 00:02.000 ¡Eso es un, un, eso es una L!

crédito de transcripción 00:04.000 --> 00:05.000 Transcrit par Célestes™ Esto permite que una hoja de estilo apunte específicamente a las pistas.

/* estilo para cue: test */ ::cue(#test) { color: lime; } Debido a las reglas de sintaxis de CSS, algunos caracteres deben escaparse con secuencias de escape de caracteres CSS. Por ejemplo, una identificación que comienza con un número 0-9 debe escaparse. El ID 123 se puede representar como "\31 23" (31 se refiere al punto de código Unicode para "1"). Consulte Uso de escapes de caracteres en marcado y CSS para obtener más información sobre los escapes de CSS.

/* estilo para cue: 123 / ::cue(#\31 23) { color: lime; } / estilo para cue: crédito de transcripción */ ::cue(#crédit\ de\ transcription) { color: red; }

No sé si los selectores de identificación funcionan solo con archivos .vtt y no con señales generadas a través de JS. Todavía no hay mucha información sobre VTT, ya que todavía es una tecnología de trabajo en progreso, probé diferentes enfoques, incluso usando vtt.js para analizar una cadena de VTT que contiene un estilo en línea ::cue , pero eso tampoco funciona.