Style text track using videojs

user_2587454 0
Viewed 2327

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':{},
        }
    }
});
video.js html5-video
2 Answers

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

user_50390840
Related