Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Murmur opened this issue Nov 14, 2023 · 1 comment

Comments

@Murmur
Copy link
Collaborator

Murmur commented Nov 14, 2023

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);
      ...

Dash-Industry-Forum/dash.js#3519
Dash-Industry-Forum/dash.js#4032 (comment)
Dash-Industry-Forum/dash.js#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>
@Murmur
Copy link
Collaborator Author

Murmur commented May 31, 2024

Test dashjs subtitles one-line fix (hbbtv1+hbbtv2 no changes)
Go to testing: Settings/HbbTV Testing_debug (MSE-EME) menu entry to open an internal testing_debug fork.
This forked dashjs is able to render and switch ttml subtitles(yellow button) on that one of the major hbbtv manufacturer's browser as well.
https://refapp.hbbtv.org/testing/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants