Video.js: Possible to style tracks/caption text?

[nickpish]

Very basic question here about video.js functionality-- is it possible to style the tracks-- i.e. subtitle/caption text-- with CSS? I've been searching for a library to assist in this manner, as it seems native support for styling <track> text is rather limited. I'm basically hoping to create a simple bar that spans the width of the video, with a semi-transparent white background that contains the caption text with some padding. Is this possible to achieve with video.js or any other library out there?

Thanks for any guidance here.

[EmperorRXF]

Hi Nick!
This is possible on the Video.JS HTML5 player, but not in the Flash tech. Given below are the classes you can customize (this is just an example styling, you can use your own). You can either modify the "video-js.less" file and compile it to generate the CSS or write your customizations separately after including the video-js.css or video-js.min.css

.video-js .vjs-captions {
  color: #FFFFFF;
  font-family: 'tahoma';
  font-size: 16px;
}

.video-js .vjs-text-track {
  background-color: transparent;
}

[gkatsev]

Just be warned that videojs is changing the way it's doing captions, so, what @EmperorRXF said won't apply once that lands.
See #1655 for the work that needs to happen.

[heff]

Thanks for the help @EmperorRXF! What happens when you use that with the Flash tech? It should work there too.

[nickpish]

Thanks @EmperorRXF-- do you know by chance if padding is supported in the CSS track customizations?

[EmperorRXF]

@gkatsev Thanks for the heads up!
@heff I think I got video.js player mixed up with another player. I'm having difficulty using the flash tech for the player and unable to verify if the styles are picked up. But I'm sure it's working well!

@nickpish if you mean CSS padding, yes any valid CSS is supported!

[nickpish]

@EmperorRXF -- fantastic, thanks; I've been looking high and low for this functionality...