Videojs text tracks settings

Style text tracks fo your video programmatically

Video.js don't really have a proper API for initial text track settings. Additionally text tracks are limited in colors and styles. In this article we will show what styles and colors you can change for text tracks using nuevo plugin option.

This is the list of available colors that you may set for colors:
"#FFF" -White, "#000" - Black, "#F00" - Red, "#0F0" - Green, "#00F" - Blue, "#FF0" - Yellow, "#F0F" - Magenta, "#0FF" - Cyan

Transparency available options are:
"0" - Transparent, "1" - Opaque, "0.5" Semi-Transparent

Font size percentage available values that you can set are:
0.50, 0.75, 1, 1.25, 1.50, 1.75, 2, 3, 4

Availanble text edge styles are:
"none", "raised", "depressed", "uniform", "dropshadow"

Finally font family you can switch between:
"proportionalSansSerif", "monospaceSansSerif", "proportionalSerif", "monospaceSerif", "casual", "script", "small-caps"

You can't set other than listed values, other way certain option will be ignored. All values except fontPercent must be quoted.
All text tracks styles are stored in an array. Example array of default video.js trxt tracks styles is:

Code snippet

var track_settings = {
  color: "#fff",
  textOpacity: "1",
  backgroundColor: "#000",
  backgroundOpacity: "1",
  windowColor: "#000",
  windowOpacity: "0",
  fontPercent: 1,
  edgeStyle: "none"
  fontFamily: "proportionalSansSerif"
}

When a player is initialized with Nuevo plugin, text tracks style is slightly different. The Nuevo plugin forces text track beackground to be transparent and font edge is changed to "raised".
Form version 8.5.0 Nuevo plugin has an option "captionsSettings" and you can assign text tracks styles array as you want. Of course, there is no need to include those styles that use the default style.

To set 150% Yellow Small-caps font on solid black background, tracks settings array should be:

Code snippet

var track_settings = { color: "#FF0", fontPercent: 1.5, fontFamily: "small-caps" };
player.nuevo({ captionsSettings: track_settings });