Caption style customisation

[featheast]

What do you want to do with Hls.js?

We are/were using VideoJS 7, and have a very consistent style of closed caption (608/708). There are also ways to configure the look and feel (css styles) of the captions for different use cases.

While with hls.js player, I am yet to find a way to customise the look and feel of the closed captions, like font size, color, text alignment, line height between each text lines?

What have you tried so far?

Not much I have tried other than comparing the caption rendering from both standard video.js and hls.js player.

Below are 2 screenshots I took for comparison purposes. The top one is from VideoJS, where the captions are centred on screen, with a settings panel available to update the style accordingly.
The next one is from Hls.js, where the texts are all left aligned, with a background color all the way to the rightmost, even though the text only filled less than half of the screen.

[robwalch]

CSS can be used to style caption cues by targeting the shadow-dom elements in the HTMLVideoElement captions TextTrack.

HLS.js focuses on HLS support and leaves styling and UI to the application using HLS.js. You might consider looking at player projects that use HLS.js such as media-chrome.