HTML/CSS formatted caption on video.js

I'm researching on adaptive streaming platform, I would like to ask if there is the possibility to use the subtitle (caption) channel to displays with video.js formatted(CSS) information about the current video-clip. For example: in my case i use to transmit a musical video-clip playlist and i would like to present the current artist with a css-box with infos about. I currently use GPAC stuff to send adaptive mpeg-dash videos, i would like to know if there is a way to send through caption channel the infos i need to display for each video inside a css-box instead the standard format for caption. provisory link www.allibrante.com Thanks a lot!

Solution

MPEG DASH supports subtitle information, either as a separate file or in the mp4 container.

There are different formats defined for subtitles but from the description of your needs, it sounds like W3C TTML would be a good match.

This supports CSS for styling the text - the specification includes examples like this:

<region xml:id="r1">
  <style tts:extent="306px 114px"/>
  <style tts:backgroundColor="red"/>
  <style tts:color="white"/>
  <style tts:displayAlign="after"/>
  <style tts:padding="3px 30px"/>
</region>
...
<p region="r1" tts:backgroundColor="purple" tts:textAlign="center">
  Twinkle, twinkle, little bat!<br/>
  How <span tts:backgroundColor="green">I wonder</span> where you're at!
</p>

The full spec is available here (at the time of writing): https://www.w3.org/TR/2018/CR-ttml2-20180313/ and you can see some discussion and examples here: https://github.com/rbouqueau/TTML_in_MP4_DASH_statement