Subtitle text properties #8297
-
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… |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
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({ I also need to increase the size of subtitle texts when playing full screen. |
Beta Was this translation helpful? Give feedback.
-
@belbernard video.js/src/js/tracks/text-track-settings.js Lines 113 to 123 in 7e85324 player.textTrackSettings.setValues({
backgroundColor: '#00F',
backgroundOpacity: '100',
fontPercent: 2,
});
player.textTrackSettings.updateDisplay();
Maybe listening for the player.on('fullscreenchange', ()=> {
if(player.isFullscreen()) {
player.textTrackSettings.setValues({
fontPercent: 4,
});
player.textTrackSettings.updateDisplay();
return;
}
//Reset to a default value
// ...
}) |
Beta Was this translation helpful? Give feedback.
@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
Maybe listening for the
fullscreenchange
event and then modifying the font size: