Expecting to render VTT files with timestamps beginning at 01:..., indicating a 1-hour offset, which will be globally nullified so that subtitle text lines get actually shown at at 00:

We are encountering an issue with rendering specific VTT files in the Bitmovin player. The distinctive feature of these files is that their timestamps begin with 01:…, indicating a 1-hour offset. Here’s a snapshot of the VTT content:

01:00:24.658 --> 01:00:26.426 align:center line:0
[Chuckles]
01:00:34.501 --> 01:00:35.769 align:center line:-1
[Slurps]
...

Our aim is for Bitmovin to display these subtitles starting from 00:…, effectively reducing the one-hour offset without us having to alter the original VTT content. Ideally, it would display as:

00:00:24.658 --> 00:00:26.426 align:center line:0
[Chuckles]
00:00:34.501 --> 00:00:35.769 align:center line:-1
[Slurps]
...

While the Bitmovin developer documentation suggests appending the following to the beginning of each VTT file:

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

This solution does not seem to work. Subtitles like [Chuckles] and [Slurps], expected to appear after 24 and 34 seconds respectively, are not displayed, even with the recommended adjustment.

I replicated the issue using Bitmovin’s example from the official web site https : / / github . com / bitmovin/bitmovin-player-web-samples/tree/main/subtitles, and added four subtitles. That way:

    var player = new bitmovin.player.Player(document.getElementById('player'), conf);

    player.load(source).then(function () {
        var playerContainer = player.getContainer();
        subtitleDisplay = new CustomSubtitleDisplay(playerContainer);
...

        player.subtitles.add({
                id: String(1),
                url: 'https://d29imlmrejcjlu.cloudfront.net/difuzego/FearTheWalkingDead_TimeStampZero1.vtt',
                kind: 'caption',
                label: 'fullSyntax1',
                lang: 'fullSyntax1'
            });
            player.subtitles.add({
                id: String(2),
                url: 'https://d29imlmrejcjlu.cloudfront.net/difuzego/FearTheWalkingDead_TimeStampZero2.vtt',
                kind: 'caption',
                label: 'fullSyntax2',
                lang: 'fullSyntax2'
            });
...              
    }, function () {
        console.log('Error while loading source');
    });

I published the reference file here as an online example. All VTT files load correctly in Bitmovin, but only the last one with 00:… timestamps renders the subtitles properly. To offer a clearer perspective, I’ve even posted a video witnessing-record illustrating the problem.

Therefore would you mind providing guidance on applying the instructions from developer . bitmovin . com /playback/docs/why-are-my-webvtt-subtitle-tracks-not-in-sync-with-the-video effectively and successfully ?

Hi,
you could correct your subtitles through the Network API the following way :

            conf.network = {
                preprocessHttpResponse: function(type, data) {
                    if (type === bitmovin.player.HttpRequestType.MEDIA_SUBTITLES) {
                        data.body = data.body.replace(/(?<!:)(01)(?=:)/g, "00")
                    }
                    return data;
                }
            }

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.