Caption styling is broken

[eban5]

Description

Looks like we came across a bug (maybe two). Whenever we use videojs-contrib-dash, captions are not able to be styled using the captions settings menu. If captions are toggled 'on', there are no vjs-text-track-cue divs being attached to the DOM. Further, it seems that no matter what we set in our player options for nativeCaptions, the plugin is letting the browser decide what to do for parsing. In the case of Chrome, we see webkit media divs that respond only to the macOS Accessibility captions styling menu — something that we only want to happen on Safari. Regardless of settings nativeCaptions to false when the browser is Chrome/Firefox, it uses the native captions parsing.

Reduced Test Case

• Visit the videojs-contrib-dash player: https://videojs.github.io/videojs-contrib-dash/
• Load the following stream URL: https://media.axprod.net/TestVectors/Cmaf/clear_1080p_h264/manifest.mpd
• Start playback and toggle 'on' any captions from the captions menu
• Then, go to Captions Settings to style them and set the text color and background color to something obvious like Magenta or Green.
• Scroll down and hit "Done" to save your changes

Screenshots:

Results

• The styles are not applied to the text tracks at any point in the video.

Expected

• Expected to see our styles set in 'captions settings' to be applied to the text tracks

Additional Information

versions

• VideoJS 7.19.2

browsers

• Non-WebKit — e.g., Chrome and Firefox

plugins

• videojs-contrib-eme 4.0.0
• videojs-contrib-dash 5.1.1

[rudemateo]

one quick note: in the test case above you can see that this affects DASH streams with VTT captions. This library already properly handles caption styling for DASH streams with TTML captions.

[gkatsev]

With contrib-dash, dash.js/the browser is in charge of rendering the text tracks. So, the Video.js relevant classes aren't available.

Consider not using contrib-dash. Video.js (via VHS, which is available by default with Video.js 7) has DASH support and can play the above stream (example), though, it doesn't support IMSC/TTML or some more advanced DASH use-cases.

[eban5]

We originally caught this issue with our DRM streams; however, we're only really using contrib-dash for parsing playback quality levels from the DRM manifest and making those available in a menu. I'll investigate switching our player over to just using VHS + eme for DRM streams and see if we can find a workaround for playback quality.

[damanV5]

@eban5 I am also facing this issue for a live Dash DRM video , a grey strip gets attached just above where the caption renders. This is for the case where the video is live dash with embedded captions. Have you found any workaround for this? As I am not able to hide the grey strip that is rendered above the captions

Content Information :-

Video type : Live Dash DRM

Caption mimeType is application/mp4 therefore I am using initialising like this :- html5: { dash: { useTTML: true } }

FYR :

@gkatsev As the content is DASH Live DRM . Therefore , I am not able to use just the videojs VHS for this as "DASH assets which use $Time in a SegmentTemplate, and also have a SegmentTimeline where only the first S has a t and the rest only have a d, do not load currently" is not supported yet.

[gkatsev]

@damanV5 that VHS issue should be fixed by now. So, worth retesting with latest Video.js/VHS.

[damanV5]

@gkatsev I have checked on https://videojs-http-streaming.netlify.app which I believe has the latest version of VHS deployed.

It loads fine but on clicking the play icon it gets stuck with a loader and never plays.

Unfortunately, I cannot share the asset link here but the video is Live DASH with DRM protection along with embedded captions which have the mimeType set as application/mp4.

[damanV5]

@eban5 Were you able to resolve this?

[eban5]

@damanV5 we had to hide the extra gray strip that appeared in the DOM using CSS.

[damanV5]

@eban5 Would you be able to provide the css ? It is somehow present in the video tag element. I have tried various methods but not able to hide it.

[eban5]

@damanV5 Ultimately, we had to use TTML (EBU-TT) with our DASH streams because of a limitation upstream from our video player. We were only seeing that extra container on non-Safari browsers, so in those cases we would add a custom class to the video element:

const playerEl = document.querySelector('video');
...
playerEl.classList.add('custom-class');

then in the CSS we would target that class and specify the WebKit pseudo-element:

.custom-class::-webkit-media-text-track-container {
  display: none;
}

Hope that helps.

[damanV5]

Thankyou @eban5 ! , It works 👍 .