Captions Style Settings

Font (+) Font (-)

Adjust the style of text tracks

Videojs player does not feature any public function or option to adjust the style of text tracks programmatically. The only way to change the style of captions/subtitles is to change it through the Captions Settings Modal Dialog. This means that you do not have the option to change the style of the text tracks before the video starts to play.
The Nuevo plugin features an easy function to adjust one or more styles of text tracks at any time, before video starts to play or during video playback.
You need to learn which styles of text tracks you can adjust and what values are allowed to set for each style.

color (text color) - default value: "#FFF" (white)
Other allowed values: "#000" (black), "#F00" (red), "0F0" (green), "#00F" (blue), "#FF0" (yellow), "F0F" (magenta), "0FF" (cyan)
textOpacity - default value: 1 (opaque). The only other allowed value is: 0.5 (semi-transparent)
backgroundColor - default value: "#000".
Other allowed values are same like for text color: "#FFF", "F00", "#0F0", "00F", "#FF0", "#F0F"
backgroundOpacity - default value: 0 (transparent)
Other allowed values: 0.5 (semi-transparent), 1 (opaque)
windowColor - default value: "#000"
Other allowed values are same like for backgroundColor: "#FFF", "F00", "#0F0", "00F", "#FF0", "#F0F"
windowOpacity - default value: 0 (transparent)
Other allowed values: 0.5 (semi-transparent), 1 (opaque)
fontPercent - default value: 1.25
Other allowed values are: 0.5, 0.75, 1, 1.5, 1.75, 2, 3, 4
edgeStyle - default: "raised"
Other allowed values are: "none", "depressed", "uniform", "dropshadow"
fontFamily - default: "proportionalSansSerif"
Other allowed font families are: "monospaceSansSerif", "proportionalSerif", "monospaceSerif", "casual", "script", "small-caps"
Without changing video.js source code it is not possible to use other font family.

The Nuevo plugin's function allows upi to change one or more styles described above. See examples of the function usage:

Code snippet

player.textTracksStyle({color: "#FF0"})
player.textTracksStyle({color: "#FF0", backgroundOpacity: 1})
player.textTracksStyle({color: "#FF0", backgroundOpacity: 1, fontPercent: 1.5})

You can use this function once the player is loaded and later, during playback as well.
To change text track styles before the video starts to play, you must wait for the player ready event.

Code snippet

player.on('ready', function(){
player.textTracksStyle({color: "#FF0", backgroundOpacity: 1})
});

Keep in mind that captions and subtitles on iOS devices are rendered natively, and text track settings are disabled. You can adjust captions through device settings only.