Search code examples
javascriptcssmpeg-dashsubtitle

Changing the text size for subtitles in Shaka Player


We are looking to use the Shaka player and I have played around with the demo of the player here: https://shaka-player-demo.appspot.com/demo/. One of the requirements we have is for the user to be able to change the text size of the closed captions. I see that we have an option to toggle the CC option in the demo, but couldn't find anything related to modifying the displayed text.

I did debug the this.player_ object to see if there was anything available to tweak the displayed subtitle text, but couldn't find anything.

Is there any API available to do this or is it not possible to do this?

Thanks for your help!


Solution

  • You can change the appearance by altering the style - using CSS - of the Shadow DOM elements generated when the subtitles are injected by Shaka.

    In your case you would be using the ::cue pseudoelement like this:

    ::cue {
      font-size: 12px;
    }
    

    See more here: https://w3c.github.io/webvtt/#styling (note that not all mentioned there may be actually implemented in current browsers)