WebVTT captions not rendering at all

[eban5]

Description

We are experiencing issues with not being able to render captions in our web player. Our HLS manifests reference a WebVTT file that the VideoJS player is able to download but I think something breaks during parsing. When we go to turn our captions on, an error shows up: Uncaught TypeError: Failed to construct 'VTTCue': The provided double value is non-finite. This leads us to find that in the player’s text tracks, startTime is showing up as NaN. This error appears to be getting thrown by the VTTSegmentLoader (handleSegment_ case):

segmentInfo.cues.forEach(function (cue) {
     _this3.subtitlesTrack_.addCue(_this3.featuresNativeTextTracks_ ? new window$3.VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
   });

• Here is an example HLS stream of ours where you can see the issue: https://ga.video.cdn.pbs.org/videos/nova/7445a819-a209-438c-a7ed-9b435a231387/2000113880/hd-16x9-mezzanine/ut9tye3s_4610-lost-viking-army-web-16x9-720p_458.m3u8
• This is only one example, but we have not yet found an HLS stream of ours that renders the captions.
• Captions are working fine on our other platforms (OTT Smart TV apps, iOS / Android apps).
• Captions are working when using the test player on hls.js
• We’ve tried the default VideoJS (http-streaming) player with our HLS stream and the captions didn’t work even in the most basic of examples.

Steps to reproduce

1. Load the above example HLS stream as a source in a basic VideoJS player example or use the JSBin example posted above.
2. Try to turn captions ON

Results

Expected

• Turn captions ON and see captions rendered on screen

Error output

Uncaught TypeError: Failed to construct 'VTTCue': The provided double value is non-finite.

The stacktrace for this error points to VTTSegmentLoader's handleSegment_ switch case, particularly the following loop:

segmentInfo.cues.forEach(function (cue) {
     _this3.subtitlesTrack_.addCue(_this3.featuresNativeTextTracks_ ? new window$3.VTTCue(cue.startTime, cue.endTime, cue.text) : cue);
   });

Additional Information

videojs-http-streaming version

videojs-http-streaming "1.13.2" and "2.2.3"

videojs version

video.js 7.8.4 and video.js 7.10.1

Browsers

• Chrome / Firefox / Safari / Edge
• Issue spotted on recent and latest versions of these browsers.

Platforms

• Mac and PC (not tested with Linux)

Other Plugins

"videojs-contrib-ads": "6.7.0",
"videojs-contrib-quality-levels": "2.0.9",
"videojs-hls-quality-selector": "1.1.1",
"videojs-ima": "1.8.0",
"videojs-logo": "2.1.1",
"videojs-markers-plugin": "1.0.2",

Other JavaScript

• Preact 10.5.3 / React 16.13

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[eban5]

Just wanted to stop by and see if there is any other information I can provide to make debugging this easier. I've been trying out the latest VideoJS 7.10.3 release, which includes http-streaming 2.3.0 but so far the issue persists. In the meantime, we're able to fallback to use sideloaded caption files. Thanks in advance.

[gkatsev]

Looks like for whatever reason the startTime and endTime come out as NaN which is why they aren't displaying.

[gkatsev]

I looked into it a bit and figured out the problem. It's because there's a space after the comma in the webvtt header. It's probably something we should fix but if you remove the space it'll start working again.
WORKING:

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

BROKEN:

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

[eban5]

Thanks, @gkatsev ! I didn't think to check extra whitespaces. I'll give this a shot in the morning and update this ticket.

[gkatsev]

You're welcome. It's a tricky thing to find. I ended up stepping through the code and then noticed that it was searching for LOCAL instead of LOCAL.
It's definitely something we can handle better. At the very least we can check whether the cue times end up as NaN and log a warning or something.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eban5]

@gkatsev, we happened to hit a blocker on our player that can be resolved by addressing this particular issue. I pushed a simple fix to trim the whitespace from the parsed keys over in videojs/vtt.js#60 and was hoping someone might be able to take a look. Thanks in advance.