duplicate display of VTT subtitles (since v3.8.0)

[phloxic]

Description

VTT subtitles display twice in some scenarios.

Can be reproduced in the netlify demo.

Sources

To trigger the scenario I needed a rather long video (and patience), which is why I refer again to the netlify app.

Steps to reproduce

Easiest to reproduce using the Firefox network panel because it offers a wide range of connections speed by default.

1. Start playing video with VTT subtitles
2. At some point throttle the connection really hard, making the player stall and buffer once the cached segments run out
3. When playback resumes, duplicate display of subtitles may happen
4. Can also happen when releasing a throttled connection

Results

Expected

VTT subtitles should be shown correctly

Error output

No errors. The only visible symptom potentially pointing to the problem are multiple fetches of the same vtt segments (in the network tab).

The multiple fetches seem strange, e.g. hls.js (where it works) does not do that. OTOH, it works with http-streamig v3.7.0 (Video.js v8.6.1). So the culprits should be listed here.

Additional Information

• Does not happen in native HLS (Safari etc.)
• Tested streams pass mediastreamvalidator test, in fact they are created by Apple's streaming tools

Note: the VTT segments in the example are rather long (40 seconds, 10 times video segment duration), but that is according to spec. mediasubtitlesegmenter creates 60 seconds by default.

videojs-http-streaming version

what version of videojs-http-streaming does this occur with?
videojs-http-streaming 3.8.0 and later

videojs version

what version of videojs does this occur with?
video.js 8.7.0 and later

Browsers

• Firefox 122.0.1 - replicated with all http-streaming releases v3.8.0 and higher

I am very certain it will happen in other browsers.

Platforms

• Verified on macos 14.3.1 - replicated with all http-streaming releases v3.8.0 (Video.js v8.7.0) and higher

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below.

• no

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below.

• no

[phloxic]

FWIW, I can still repro with http-streaming v3.11.3 (Video.js v8.11.5). Maybe a bit less, but still duplicates, both on display and fetching.

[judy00]

I've also encountered a similar issue with duplicated subtitles in HLS streams. I suspect that the problem might be related to the implementation of the removeDuplicateCuesFromTrack function.

http-streaming/src/util/text-tracks.js

Line 376 in b6ff608

export const removeDuplicateCuesFromTrack = function(track) {

This function creates a unique key for each subtitle cue in the format ${cue.startTime}-${cue.endTime}-${cue.text}. If a subtitle with the same key is found, it will be removed; otherwise, it will be retained.

I've noticed that the bug cue have same cue.text but different cue.startTime and cue.endTime, which might cause the duplicated subtitles not to be removed. This could also be related to the methods used to calculate startTime and endTime, leading to ineffective identification and handling of duplicated subtitles.

My VTT subtitles have 138 lines, but they are duplicated twice over.

I am looking for more opinions or suggestions on how to address this issue.

video.js version: 8.10.0
videojs-http-streaming version: 3.10.0

[phloxic]

Could possibly (manual testing is error prone) be fixed by bdfe0e0 in v3.12.2