Subtitles on MSE mode, textTrack.mode="showing" not working on all hbbtv devices

Dashjs(MSE) player is using a native videoElem.textTrack.mode="showing" to control which of the TTML text tracks are rendered. This works fine on PC browsers and most HbbTV devices. Rendering of the actual ttml texts is using a normal DIV+SPAN html styling.

At least one of the major hbbtv manufacturer's browser always keep textTrack.mode="hidden" so no subs are considered visible for rendering.

Forking a dashjs sources to use showing+hidden values enables subtitle rendering, but this quick test may introduce side effects. DashJS developers comment: We will probably move away from native tracks as they are not properly implemented on all devices.

TextTracks:
function _handleHtmlCaption(currentItem, timeOffset, track) {
   //if (track.mode === "showing") {
   if (track.mode === "showing" || track.mode === "hidden") {
      _renderCaption(this);
      ...

https://github.com/Dash-Industry-Forum/dash.js/issues/3519 https://github.com/Dash-Industry-Forum/dash.js/issues/4032#issuecomment-1808299114 https://github.com/Dash-Industry-Forum/dash.js/pull/4089

For reference this is how Dashjs video-caption container DIV looks like in a DOM tree after rendering a text line.

<div id="video-caption" style="position: absolute; display: flex; overflow: hidden; pointer-events: none; top: 0px; left: 0px; width: 640px; height: 360px;">
<div id="cue_TTML_14">
  <div style="position: relative; width: 640px; height: 360px; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 0;">
     <div lang="en" style="position: absolute; margin: 0px; display: flex; flex-direction: column; justify-content: flex-end; height: 36px; width: 416px; opacity: 1; top: 306px; left: 160px; overflow: hidden; padding: 0px; visibility: visible; writing-mode: horizontal-tb; z-index: auto;"><div style="margin: 0px; visibility: visible;">
      <div style="margin: 0px; background-color: rgba(0, 0, 0, 0.76); visibility: visible;">
      <p style="margin: 0px; direction: ltr; font-family: sans-serif; font-size: 16.8px; font-style: normal; font-weight: normal; line-height: 21px; text-align: center; unicode-bidi: normal; visibility: visible;">
        <span style="margin: 0px; color: rgb(255, 255, 255); direction: ltr; font-family: sans-serif; font-size: 16.8px; font-style: normal; font-weight: normal; text-decoration: none; text-combine-upright: none; unicode-bidi: normal; visibility: visible; white-space: normal;">
        <span>Subtitle 5: 1:05 – 1:27(eng)</span>
</span></p></div></div></div></div></div>
</div></div>

HbbTV-Association / ReferenceApplication

Subtitles on MSE mode, textTrack.mode="showing" not working on all hbbtv devices #79