Support for colors in WebVTT subtitles

[erankor]

Is your feature request related to a problem? Please describe.

Here is a test HLS stream that uses colors in its WebVTT subtitles: https://www.kaltura.com/p/0/playManifest/entryId/0_z79l0t8f/format/applehttp/protocol/https/deliveryProfileId/20322/x.m3u8 (for example - <c.magenta.bg_black>This is magenta text on a black background</c>)

The colors are displayed correctly on the upcoming iOS 16 beta version, but they are ignored in hls.js (other styles, such as bold/italics, are working as expected). I also tested Shaka player, and the colors work fine there.

Describe the solution you'd like

Requested solution: I'd like to see colors :)

Additional context

No response

[erankor]

One thing I forgot to mention - the styles are on the "Spanish" subtitles, need to choose that one...

[mtoczko]

I looked into it. In fact, the solution to this problem is to create a css:

::cue(.yellow) {color: yellow;}
::cue(.bg_blue) {background-color: blue;}

Do we want to have classes defined and injected by hls.js?

[robwalch]

Not a Contribution

I looked into it. In fact, the solution to this problem is to create a css:

Thanks for looking into it @mtoczko. Looks like markup details and the expected color/background-color values are listed under https://www.w3.org/TR/webvtt1/ and clients rendering cues should handle these presentation hints.

Do we want to have classes defined and injected by hls.js?

I prefer not have HLS.js inject CSS or interact with the DOM other than directly with the attached media element. Site authors or parent player libraries can add or polyfill styles. If HLS.js were to add these shadow-DOM classes they could clash with CSS added by parent player libraries, override accessibility specific user-agent styles, or spill over to other elements. For these reasons I think CSS injection would be better left to applications using HLS.js, or left to the browser.

[mtoczko]

Here there would be one exception if we add support for style blocks in WebVTT.

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.

[robwalch]

Here there would be one exception if we add support for style blocks in WebVTT.

Maybe tighter vtt.js integration? That's one way to get more consistent rendering across browsers. The config supports disabling of native WebVTT cue rendering so that subtitles and captions can be routed via events to another renderer. The entire file is not routed so maybe addition work would still be needed to handle style blocks.