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 | ||
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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.