Bug 238540 – Styles not working in WebVTT tracks delivered via HLS

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

[Eran Kornblau]

Hi,

I'm trying to control the color of subtitles delivered over HLS/WebVTT, and it seems the styles are getting ignored
(tested on iPhone, but I assume it's on all devices).
I sent this info to the HLS team, and they suggested that I open a bug here...

Following some recent changes in EU regulations related to accessibility, this issue has become a bit urgent for us
(we received queries about this from multiple customers...)

My test stream URL is here (the styles are on the Spanish subs) –
https://www.kaltura.com/p/0/playManifest/entryId/0_z79l0t8f/format/applehttp/protocol/https/deliveryProfileId/20322/x.m3u8

A sample WebVTT fragment -

WEBVTT
 
STYLE
::cue(b) {
  color: peachpuff;
}
 
00:00:05.000 --> 00:00:10.000
<c.yellow.bg_blue.magenta.bg_black>This is magenta text on a black background</c>
 
00:00:10.000 --> 00:00:15.000
<b>bold text</b>
 
00:00:15.000 --> 00:00:20.000
<i>italic text</i>

Basic formatting (bold/italic/alignment) works fine, but not colors.

In addition, it seems that WebKit is missing the implementation of "Default text colors" <https://www.w3.org/TR/webvtt1/#default-text-color>
and "Default text background colors" <https://www.w3.org/TR/webvtt1/#default-text-background>

Thank you!

Eran

[Radar WebKit Bug Importer]

<rdar://problem/91341417>

[Przemyslaw Gorszkowski]

Hi Eran,

I think I found the reason of the problem and I am working on the fix for it. There are missing implementation of the defaults definition of css classes in in file: https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/css/mediaControls.css

In mean time you can try some workarounds for your problem:
1. if you can modify the WebVTT files you can add there css classes for missing defaults, e.g.:
STYLE
::cue(.magenta) {
  color: rgba(255,0,255,1);
}

2. if you can't modify the WebVTT files but you can modify the css in the HTML site on which your stream is used then you can also do this, e.g.:
::cue(.magenta) {
  color: rgba(255,0,255,1);
}


You can specify in such way any classes you would like to use in your WebVTT files.

In the meantime I will try to push my fix and cross fingers for positive review:)

[Przemyslaw Gorszkowski]

Pull request: https://github.com/WebKit/WebKit/pull/2218

[EWS]

Committed 252464@main (df2ca59a2ba4): <https://commits.webkit.org/252464@main>

Reviewed commits have been landed. Closing PR #2218 and removing active labels.