Duplicate captions when using HLS

[kiritokatklian]

Expected behaviour

One instance of captions is shown on the video.

Actual behaviour

Two sets of captions are shown on the video.

Steps to reproduce

1. Enable caption (click the CC button)
2. Play the video
3. Go to 1:45 minutes
4. Change caption to Español

At this point you should see duplicate captions. If not:

5. Refresh page (Español is now auto selected)
6. Go to 1:45 minutes

Extra:

7. Disable captions (only one caption disables; possibly related)

Environment

• Browser: FireFox Nightly
• Version: 106
• Operating System: MacOS
• Version: 12.5

Console errors (if any)

No errors.

Link to where the bug is happening

HLS + duplicate captions: https://codepen.io/Shawl8938/pen/zYWQMOZ

Additional Notes

Tested with FireFox Nightly 106, but this happened on 105 too. It also happens in normal FireFox. I've been struggling with this for days 😅

This happens with any caption selected, not just Español as in the steps above.

Disabling captions through Plyr only disables one of the captions. My guess is that HLS.js is the culprit of the second set of captions (it's on the video directly).

Issue couldn't be replicated on Safari.

Example

[kiritokatklian]

I did a bit more digging, and as I suspected it has to do with HLS.

Issue happens with latest version of HLS 1.2.1. This example from #994 doesn't have the same issue, because it uses an older version of HLS 0.9.1

Placing the latest HLS version in the above example which didn't have any issues with captions, causes the duplicate caption issue.

My guess is something changed between those two versions and Plyr hasn't been updated to handle this change.

Update

I tried using HLS 0.10.0 which came right after 0.9.1, and the same issue occurred. There are 183 commits between the two, so not sure how to pinpoint the change 😅

[benbois]

Similar problem with kind="subtitles" and no subtitles with kind="captions" with HLS version 1.0.0 > 1.2.4. Subtitles show with HLS version 0.9.1 and kind="captions".

[benbois]

For record, this problem came back with plyr v3.7.7 and hls v1.3.5 !

[mudit2108]

Faced the same issue, I am using HLS.js 1.5.7 and plyr 3.7 Resolved it by turning off the subtitles explicitly in HLS.js

// Assuming you have a reference to your HLS.js player instance var player = new Hls(); player.loadSource('path/to/your/video.m3u8'); player.attachMedia(videoElement);

// Disable captions player.subtitleDisplay = false;

[zain-mansuri]

Faced the same issue, I am using HLS.js 1.5.7 and plyr 3.7 Resolved it by turning off the subtitles explicitly in HLS.js

// Assuming you have a reference to your HLS.js player instance var player = new Hls(); player.loadSource('path/to/your/video.m3u8'); player.attachMedia(videoElement);

// Disable captions player.subtitleDisplay = false;

Worked for me, Thanks