Bug 238540

Summary:	Styles not working in WebVTT tracks delivered via HLS
Product:	WebKit	Reporter:	Eran Kornblau <eran.kornblau>
Component:	Media	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED FIXED
Severity:	Normal	CC:	eric.carlson, jer.noble, pgorszkowski, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	WebKit Nightly Build
Hardware:	Unspecified
OS:	Unspecified

Description Eran Kornblau 2022-03-30 01:38:12 PDT

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

Comment 1 Radar WebKit Bug Importer 2022-04-06 01:39:14 PDT

<rdar://problem/91341417>

Comment 2 Przemyslaw Gorszkowski 2022-07-08 02:40:18 PDT

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:)

Comment 3 Przemyslaw Gorszkowski 2022-07-08 05:33:38 PDT

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

Comment 4 EWS 2022-07-14 11:19:07 PDT

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

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