WebVTT styling not applied in simple example

Question

I've been trying to get .vtt subtitles working on a video using this simple HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    /* video::cue{
      color:yellow
    } */
    </style>
  </head>
<body>

<video width="600" height="400" controls>
  <source src="./MIB2.mp4" type="video/mp4">
  <track id="textTrack" label="pt" kind="subtitles" srclang="pt" src="./MIB2.vtt" default >
</video>

</body>
</html>

I've added some colors and styles to my .vtt file but they don't seem to be working.

For example: VLC will show all of my red colors (from ) but once I try it in chrome 71 the color won't show. Other things like bolt will work, but still no extra styles are applied like I gave it. I don't know why this is happening or how to fix this. Is this a bug? It also doesn't work in firefox btw.

The subtitle file is:

WEBVTT


REGION
id:Frank
color:rgba(255,0,0,1)

STYLE
::cue(#1){
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: blue;
}
::cue(b){
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: green;
}
::cue {
  color: red;
}

1
00:00:00.500 --> 00:00:04.000
Aprendi #1 a <b>me</b> virar e <c.red.caps>você voltou</c>

2
00:00:04.100 --> 00:00:06.000 align:left size:150% region:Frank
<v.first.loud Frank>do espaço <b>sideral</b>

THIRD line
00:00:06.100 --> 00:00:10.500 align:right size:50%
e agora vejo que você está aqui no baixo astral

4
00:00:10.600 --> 00:00:14.000 align:left size:150%
eu devia me mudar e ter tomado a sua chave

5
00:00:14.100 --> 00:00:17.500 align:right size:50%
se soubesse que ia voltar para mim enfernizar

6
00:00:17.600 --> 00:00:19.500 align:left size:150%
agora vai, sai daqui

7
00:00:19.600 --> 00:00:21.500 align:right size:50%
Frank!

8
00:00:21.600 --> 00:00:24.100 align:left size:150%
ponha a cabeça para dentro

9
00:00:24.200 --> 00:00:26.500 align:right size:50%
antes que eu emprense nessa janela

10
00:00:26.600 --> 00:00:29.500 align:left size:150%
tá legal

11
00:00:29.600 --> 00:00:33.500 align:right size:50%
hhmm... hhmmm... hmmm...

12
00:00:33.600 --> 00:00:34.000 align:left size:150%
FRANK!!!

score 3 · Answer 1 · answered Feb 21 '19 at 23:39

Styling within the WebVTT file simply isn't standardized in any browser yet. Hopefully it will be sometime soon.

Reference: Jump to Advanded file formats > WebVTT: https://support.google.com/youtube/answer/2734698?hl=en

When it will, I don't know if it will be possible to do multiple blocks of CSS with just one STYLE keyword though.

What is still possible:

You can use the cue settings that are quite modular:

00:00:00.000 --> 00:00:10.000 line:63% position:72% align:start
Hello world.

You can also apply your CSS rules by writing them outside of the VTT file, like in a <style> tag as you did:

<style>
video::cue {
  color: red;
}
</style>

Although, the more advanced selectors like ::cue(b) or ::cue(#1) are not available at all. I don't really know how to circumvent this limitation, if you have to style only a certain cue, or a bold part of a cue for example.

score 0 · Answer 2 · answered Nov 29 '19 at 20:48

I have tested your vtt file in Linux right now. Common result: color styles have no effect, bold tags have produced text with higher font-weight. Second subtitle = "do espaço sideral" referred here by me as T,

Chrome/57.0 Result: text is positioned, T positioned left, normal font size.

Firefox/70.0 Result: text is positioned, it is written with smaller fonts, on the left side

Epiphany/3.14.1: text is positioned precisely. T is on right side, normal size.

Writing a new application, I've discovered the same as JacopoStanchi has written: "::cue" rules in stylesheet can manage colors and other things, see ::cue settings at MDN

WebVTT styling not applied in simple example

2 Answers2