vidstack
Duplicate Captions Rendered from Segmented WebVTT in HLS Streams
Current Behavior:
When playing HLS streams with segmented WebVTT subtitle tracks, the same caption text appears twice on screen, using both <Captions> component or <DefaultVideoLayout>.
The segmented WebVTT files contain duplicate cues across segment boundaries, and Vidstack displays all active cues without deduplication.
Expected Behavior:
Cues should be deduplicated and the same caption should only appear on screen once.
Steps To Reproduce:
Use an m3u8 playlist with segmented WebVTT captions where the same caption appears on multiple segments Turn on captions Notice a caption that spans segments appears on screen twice.
Reproduction Link:
See demo notably at 11s mark.
[repro]: https://stackblitz.com/edit/vidstack-examples-anoiwkzs
Using just captions renderer and a video element [not_reproduced]: https://stackblitz.com/edit/media-captions-oknhtq7t
Environment:
- Framework: React / Vue
- Node: 16.0.0
- Vidstack Version: 1.12.13
- Browser: Chrome
Anything Else?
I downloaded the WebVTT file from here and added it to my video https://en.wikipedia.org/wiki/WebVTT
The m3u8 playlist URL: https://play.boxcast.com/p/at33dj71dzzjaybsogz0/v/all.m3u8?Expires=1756626944&Signature=FTZDgjAY6pVVugtYMvPZiqPtJ-wuW3Fbh~gRQK0k2hVXMeGpBlkCQRNuVsEqR-Mg0jnxAr~VRU-vYFbzR-UgvpuQiup2PdQjxw9HxoLOeD9T0HkwfkEa1DyhpFVHbyqis-hXIg2M5LXO9-BV43E-HXxYW~rsz9XDVt2gZhUC9aWu1rEcH50va3hzKNP33rEznDY~j7nlKMKX-0c~mM4YzHLz74PVuzphEcUoR876amyJ99vAxTXVsMFRS4t0qzrrNHLz3qPjQeUUn9QKl9dNAUvVFaoykN57zKkrjSQtFcD8-90y0K5S6v1q9c3ZFFO9eIYxLQ5hh6JvV5BRolqqFA__&Key-Pair-Id=APKAJ7GUCBQUK6NTWZCA
Turning on HLS captions using renderTextTracksNatively: true fixes the issue but would prefer non-native captions.
Both captions are drawn in the "non-native" way, this is not a case where HLS captions and non-native are both appearing together.
