Subtitles are displayed before it says in .vtt file timestamps

[Levani kistauri]

What version of Hls.js are you using?

1.4.14

What browser (including version) are you using?

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

What OS (including version) are you using?

macos 14.4

Test stream

No response

Configuration

I don't have custom configurations, i use default ones

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

I have a lambda function that give me different video formats when video is uploaded, and issue is with HLS player when i want to add subtitles to master.m3u8 file i linked new file to it subtitles_en.m3u8 that has link to .vtt file, When I check in .vtt file timestamps are correct but when i give master.m3u8 's link to HLS player timestamps are changed and subtitles are not in sync with video.

Expected behaviour

I expect HLS video player to display subtitles on the timestamps that are described in .vtt file

What actually happened?

Subtitles are displayed a little bit early then they should be

Console output

-

Chrome media internals output

No response

[Rob Walch]

Please include:

• Test stream (this is likely an issue with your VTT content)
• Expected behavior (including VTT content)
• Actual behavior (including video.currentTime where the subtitle is displayed)

Have you verified that timing is correct when the HLS asset is played using other HLS clients (like Safari for example)?

Make sure your VTT segments include X-TIMESTAMP-MAP WebVTT metadata headers as described in the WebVTT section of the HLS spec https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis#section-3.1.4

[Levani kistauri]

Test stream: https://dl29bi0xnzte0.cloudfront.net/lesson-be1f3417-a8ec-42a6-9839-2e33a7e2ec96/master.m3u8
Expected behavior: here is link to .vtt file that says correct timestamps, as you can see there first subtitle should be displayed at 16 secons but it is displayed at 14-15.
Actual behavior: you can see here first subtitle is displayed at 14 second.

I have tried playing video on your latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page but the behevour is the same.

[Rob Walch]

Expected behavior: here is link to .vtt file that says correct timestamps, as you can see there first subtitle should be displayed at 16 secons but it is displayed at 14-15.

The subs are also displayed at 14-15 in Safari's built-in HLS player. The issue is with your WebVTT header:

X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:90000

Probing the first TS file shows a starting timestamp of 2.056533 (pts=188088) so you need to adjust the X-TIMESTAMP-MAP accordingly. Here's a good overview https://sdks.support.brightcove.com/features/synchronizing-webvtt-captions.html

[Levani kistauri]

Edited: i have tried again and it works, thanks mate.

@robwalch I have tried changes this header with timestamp you mentioned but issue still remains, you can see here:

https://dl29bi0xnzte0.cloudfront.net/lesson-42f14068-5172-4d93-9c19-c85a7c13e3d3/master.m3u8

[Rob Walch]

Please close the issue if you've resolved the problem.