You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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.
itsjamie
removed
the
Needs Triage
If there is a suspected stream issue, apply this label to triage if it is something we should fix.
label
Mar 17, 2024
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.
The text was updated successfully, but these errors were encountered: