Positioning Closed captions for CEA

[pmendozav]

Description

For Live streaming using CEA-608 in Video.js:

• In version 7.x.y, cues were always bottom-centered in the player.
• In version 8.x.y, the behavior changed: cues now appear at the top or bottom, with left or center alignment depending on the stream.
  This CSS fix helps, but isn't enough. Here's an example with the cue container highlighted in green:

In v7.x.y, the container is centered:

In v8.x.y, having the css fix, the text aligns inside the container, but the container itself is still off-center:

Key differences I found in the code:

• In v7, cue.align = 'center', while in v8, cue.align = 'left'.
• In v8, position is calculated as position: 10 + Math.min(70, row.indent * 10) + row.offset * 2.5, but offset and indent values are often unreliable, resulting in incorrect horizontal alignment.
  -For line, v7 used an automatic setting, while v8 assigns line: i+1, where i is the cue index, which leads to vertical misalignment.

While I agree that using cue metadata for positioning is technically correct, many live streams don’t provide accurate data, leading to an inconsistent user experience (e.g., bottom-left for stream A, top-left for stream B).

Wouldn't it be better to have a flag to toggle between using CC metadata and letting Video.js calculate the position as it did in v7.x.y? My current workaround is this:

    track.cues_.forEach(cue => {
        cue.align = 'center';
        cue.position = 'auto';
        cue.line = 'auto'
    })

(This resets the cue properties to the default values used in v7.x.y)

Reduced test case

https://videojs-http-streaming.netlify.app/?debug=true&autoplay=false&muted=false&fluid=false&minified=false&sync-workers=false&liveui=true&llhls=true&url=https%3A%2F%2Fdai.google.com%2Flinear%2Fhls%2Fpa%2Fevent%2FcFDvmqo4TGW7EfHwscU_Ew%2Fstream%2F0497b86e-cda9-44c9-9a3c-74c09f774c50%3ASCL%2Fmaster.m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=false&dts-offset=false&override-native=true&use-mms=true&preload=auto&mirror-source=true&forced-subtitles=false

Steps to reproduce

Here are two example links:

• ABC
• Bloomberg

Please note that these links may expire if they are session-based. If they do, you can generate new test links directly from the original sources:

• ABC
• Bloomberg

As an additional comment, in the CSS fix thread, someone mentioned: "CEA-608 does not distinguish between different alignment." However, I have a stream that seems to be attempting to center the cues (though I can't share the link due to restrictions), but the position is still off-center. My concern is that there are multiple streams providing poor metadata, which results in incorrect visual positioning of the cues.

Errors

There are no errors displayed, but the cues are not bottom-centered.

What version of Video.js are you using?

8.17.4

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Chrome 128.0.6613.120

What OS(es) and version(s) does this occur with?

MacOS 13.2.1 (22D68) + TVs