[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Mon Sep 02 2019

Why are my WebVTT subtitle tracks not in sync with the video?

WebVTT is a common way to provide subtitles for video content. It contains time windows when a certain subtitle has to be shown, and is synchronized to the video content. The timing information in the WebVTT track gets converted into a timestamp value by the player.

However, synchronisation can be done in different ways, so it depends on the player and the technology that is used. E.g. the native player in Safari, exclusively relies on timestamp information, while HTML5 players typically align subtitles based on the current playback time. In case of the former, the MPEGTS HLS content sometimes is 10 seconds in front of the time your subtitles are shown. This is probably because the PTS (PresentationTimeStamp) of your MPEGTS HLS content starts at 10 seconds. This is a common approach to properly align audio and video tracks to each other.

How can I align my subtitles again?

In order to provide a player which relies on the timestamp data with this information about this offset, the X-TIMESTAMP-MAP can be used as described in the HLS specification. So, if your WebVTT subtitle file already contains this information, it would start like this:

1WEBVTT
2X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000

The value of MPEGTS actually describes an PTS offset of 10 seconds. The default timescale for MPEG-TS is 90,000. In order to achieve an offset of 10 seconds you multiply it by the timescale, which results in 900,000.

Give us feedback