Subtitle text properties

[belbernard]

Hello,

I wish to be able to change the font family and text size of subtitles. Apparently, the player ignores the "::cue" CSS instructions contained in WebVTT files.

Therefore, I tried to do this by using CSS :

<style> .video-js .vjs-text-track-display { font-family: Arial, sans-serif; font-size: 24px; } </style>

But it has no effect…
Any suggestion?

[belbernard]

I think I am close to the solution because I was able to modify the background with the following code, although "fontPercent" had no effect :

player.textTrackSettings.setValues({
backgroundColor: '#00F',
backgroundOpacity: '100',
fontPercent: '200',
});
player.textTrackSettings.updateDisplay();

I also need to increase the size of subtitle texts when playing full screen.

[amtins]

@belbernard fontPercent must be a valid entry see the array below:

video.js/src/js/tracks/text-track-settings.js

Lines 113 to 123 in 7e85324

	options: [
	['0.50', '50%'],
	['0.75', '75%'],
	['1.00', '100%'],
	['1.25', '125%'],
	['1.50', '150%'],
	['1.75', '175%'],
	['2.00', '200%'],
	['3.00', '300%'],
	['4.00', '400%']
	],

player.textTrackSettings.setValues({
backgroundColor: '#00F',
backgroundOpacity: '100',
fontPercent: 2,
});

player.textTrackSettings.updateDisplay();

I also need to increase the size of subtitle texts when playing full screen.

Maybe listening for the fullscreenchange event and then modifying the font size:

player.on('fullscreenchange', ()=> {
  if(player.isFullscreen()) {
    player.textTrackSettings.setValues({
      fontPercent: 4,
    });
    player.textTrackSettings.updateDisplay();
    return;
  }
  
  //Reset to a default value
  // ...
})

[belbernard]

The "logic" works. See my code below. Background colour is changed as expected when switching to full screen, and vice-versa. Font family also works. But font size doesn't… It may be relevant to note that I am using version 8.3.0 of the player.
I tried variants such as fontPercent: '4.00' or fontPercent: '400%' without success.

Below is my code:

player.on('fullscreenchange', ()=> {
if(player.isFullscreen()) {
player.textTrackSettings.setValues({
backgroundColor: '#00F',
fontPercent: 2,
});
player.textTrackSettings.updateDisplay();
return;
}
if(!player.isFullscreen()) {
player.textTrackSettings.setValues({
backgroundColor: '#000',
fontPercent: 4,
});
player.textTrackSettings.updateDisplay();
return;
}
});