Is there a way to style videojs captions?

The nativeTextTracks is set to false and I can see that the plugin is rendering his own caption. A new div created for each row of text and the style of that div is inline. I tried to send settings to the player init but videojs documentation is a bit lacking in this respect.

var player = videojs('my_video', {
    'html5': {
        nativeTextTracks: false
    },
    textTracks: {
        ??? maybe something here ???
    },
    'fluid': true,
    controlBar: {
        children: {
            'playToggle':{},
            'currentTimeDisplay':{},
            'timeDivider':{},
            'durationDisplay':{},
            'progressControl':{},
            'fullscreenToggle':{},
        }
    }
});

Is there a way to style videojs captions?

The nativeTextTracks is set to false and I can see that the plugin is rendering his own caption. A new div created for each row of text and the style of that div is inline. I tried to send settings to the player init but videojs documentation is a bit lacking in this respect.

var player = videojs('my_video', {
    'html5': {
        nativeTextTracks: false
    },
    textTracks: {
        ??? maybe something here ???
    },
    'fluid': true,
    controlBar: {
        children: {
            'playToggle':{},
            'currentTimeDisplay':{},
            'timeDivider':{},
            'durationDisplay':{},
            'progressControl':{},
            'fullscreenToggle':{},
        }
    }
});

• javascript
• html5-video
• video.js

3 Answers 3

This is an undocumented feature. You can learn more by reading the TextTrackSettings source code. Basically, you need to call setValues on the settings of your player, and then to apply the settings with updateDisplay:

let player = videojs('my_video');
player.ready(function(){
    var settings = this.textTrackSettings;
    settings.setValues({
        "backgroundColor": "#000",
        "backgroundOpacity": "0",
        "edgeStyle": "uniform",
    });
    settings.updateDisplay();
});

I've done with the css selector >.

This will override the default black background and add a black border around the letters:

.vjs-text-track-cue > div {
    background: transparent!important;
    text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black,
                 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}

I have also faced the same issue when I was needed to add padding. I have investigated a lot and found that cue can only work on following properties:

1. color
2. opacity
3. visibility
4. text-decoration
5. text-shadow
6. background
7. outline
8. font
9. line-height
10. white-space

For example :

Ex : 1
video::cue {
   color:#ccc;
}

Ex : 2
video::cue {
   outline:5px solid gray;
}

So we just need to apply css for video::cue to play with Caption Track Text in any Video Player