Video.js: Subtitles style video.js v4.12.5

[x3qmat]

Hello, I have problems with style of the subtitles and captions
With this version we can not change the font or background color, or put transparent , I think the problem is in video.js file, someone can solve this? Or explain me how can I do ? On IE11 background is transparent, but color wont change, and on Chrome, both dont work.

[mmcc]

We switched to using VTT.js, which is styled a little differently than VJS' custom captions implementation from before. The VTT.js docs forward along to the spec for applying css styles, so it should be the same for both native or emulated text tracks.

[x3qmat]

Too much confuse, for noob people.

[x3qmat]

Should have a tutorial how to implement this.

[OwenEdwards]

I don't know if this is what @x3qmat is referring to, but the ability of the user to style Captions and Subtitles in 4.12.x when rendered by VTT.js is broken in the minified video.js, although it works with the video.dev.js. I've tracked it down to this line:

cueDiv = cues[i].displayState;

https://github.com/videojs/video.js/blob/stable/src/js/tracks/text-track-controls.js#L132

which gets mangled in minification. I don't know the fix - perhaps this?

cueDiv = cues[i]['displayState'];

@gkatsev, you're the expert on this!

[surikat1978]

x3qmat install an older version 4.11.4, everything can be changed in CSS
New version for Java scripters unfortunately. And as more load to the site in last versions

[gkatsev]

With the new tracks, we're either relying on native tracks or emulated tracks. Emulated tracks have a captions settings dialog that allow you to test some styles on the cues.
In native tracks, you can style cues with the ::cue pseudo-selector.
You could try grabbing the cue's displayState and modifying it but better to just rely on the settings dialog or using the browser/os level settings to change captions.

Closing as there's nothing else to do in videojs for this.