VTT style formatting

[AVTPJ]

Description

What is the exact compliance when it comes to VTT (WebVTT) files, especially styling?

In the Mozilla dev docs, it references styling VTT in the .vtt file itself: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#within_the_webvtt_file_itself

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

But this formatting throws Malformed timestamp: ::cue { when loaded.

Comment below also seems to suggest that in-file style formatting should work, using video::cue {} but I get the same error. https://github.com/videojs/video.js/issues/4852#issuecomment-500714435

By the way, all the links in the relevant section in the Guide are broken: https://videojs.com/guides/text-tracks/#a-note-on-remote-text-tracks

Reduced test case

https://codepen.io/avtconnect/pen/OJoMYNr

Steps to reproduce

1. Create VTT file, with STYLE tag
2. Load VTT as caption into video.js player
3. Error: Malformed timestamp: ::cue {

Errors

{
    "name": "ParsingError",
    "code": 1,
    "message": "Malformed timestamp: ::cue {"
}

What version of Video.js are you using?

8.0.4.

Video.js plugins used.

n/a

What browser(s) including version(s) does this occur with?

Version 109.0.5414.120 (Official Build) (64-bit)

What OS(es) and version(s) does this occur with?

Windows 10 - 22H2 - 19045.2604

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Unfortunately, the emulated captions support in Video.js doesn't support WebVTT styles currently.

[AVTPJ]

Ah, so is the recommended method for styling captions to use player.textTrackSettings as seen at https://github.com/videojs/video.js/issues/4852#issuecomment-605413139 ?

And there is no way of styling individual textTracks, it's applied to all the tracks in the player?

[Peterdoo]

The other players at least render the cues in the way that putting the WebVTT STYLE section into the css, the cue styling will be respected. Like this:

page.css: ::cue(.white) { color: #FFFFFFFF; } ::cue(.bg_black) { background-color: #40; text-shadow: -2px 0 10px #000000FF, 0 2px 10px #000000FF, 2px 0 10px #000000FF, 0 -2px 10px #000000FF; } ::cue { background-color: #00000000; opacity: 1; }

WebVTT cue: 01:01:20.000 --> 01:01:25.575 line:90%,end align:center position:50%,center <c.white.bg_black>This subtitle:</c> <c.white.bg_black>WHITE </c><c.red.bg_black>RED</c> <c.yellow.bg_black>YELLOW </c><c.cyan.bg_black>CYAN</c>

Is there a way to do something similar with the Video.js player? Maybe using other selectors in the css instead of ::cue ?

[gkatsev]

you can enable native text track rendering ({html5: {nativeTextTracks: true}} as an option, that's also the default on Safari), and some browsers support having the styles in the HTML. Not all support the embedded styles in the WebVTT files.

Since these are rendered directly in the DOM, you can target them via .vjs-text-track-cue. Check the DOM layout if you want to style it directly.

I should note that these may not interact well if a user changes captions settings.

[AVTPJ]

Ok thanks @gkatsev, is WebVTT styling on the roadmap at all at the moment or should I just fully commit to working it all out on the DOM?

[jgcaruso]

+1 to this issue. We had a customer recently ask us about VTT customizations. Curious if this is on the roadmap or if we need to look into flipping to native text tracks. It would be a shame to lose the viewer customization settings though so we're not enthusiastic about doing that.

[Peterdoo]

I was able to get captions styled putting the following in the .css of the website on which the player is embedded:

.video-js .black { color: #000000FF; } .video-js .red { color: #FF0000FF; } .video-js .lime { color: #00FF00FF; } .video-js .yellow { color: #FFFF00FF; } .video-js .blue { color: #0000FFFF; } .video-js .magenta { color: #FF00FFFF; } .video-js .cyan { color: #00FFFFFF; } .video-js .white { color: #FFFFFFFF; } .video-js .bg_black { background-color: #000000A0; } .video-js .bg_red { background-color: #FF0000FF; } .video-js .bg_lime) { background-color: #00FF00FF; } .video-js .bg_yellow) { background-color: #FFFF00FF; } .video-js .bg_blue) { background-color: #0000FFFF; } .video-js .bg_magenta) { background-color: #FF00FFFF; } .video-js .bg_cyan) { background-color: #00FFFFFF; } .video-js .bg_white) { background-color: #FFFFFFFF; } .video-js .vjs-text-track-cue > div { background-color: #000000A0 !important; }

If you control the transmission side as well as the player side, this seems to be a way that works.