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 Captions Settings Modal Dialog. This means that you do not have an option to change the style of text tracks before the video started to play.
Nuevo plugin version 9.7.0 features an easy function to adjust one or more styles of text tracks at any time, before video start to play or during video playback.
Before using this new function, you need to learn which styles of text tracks you can adjust and what are allowed values for each style. Without changes to videojs source code this is not possible to use other style values than described below.

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.

Nuevo plugin's function allows 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.
textTracksStyle is Nuevo plugin's function, so it can be called once Nuevo plugin is loaded. So if you want to adjust text tracks style before video start, call it as in example below:

Code snippet

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

Have in mind that captions/subtitles on iOS device are rendered natively and videojs captions settings are disabled. You can adjust captions through device settings only.