VideoJS: Text Track parsing errors + Caption icon not appearing

[ibrahimjaved12]

Steps to Reproduce

Open this link: https://draft-qa.ocw.mit.edu/courses/test-site/resources/tiny-video/
Go to inspect element and observe the error: Text Track parsing errors for /courses/test-site/tiny-video_captions.srt

To locally reproduce it (make sure to allow CORS first):

1. Clone this course: https://github.mit.edu/ocw-content-rc/3.091-fall-2018
2. Modify the .env variable: OCW_TEST_COURSE=3.091-fall-2018
3. yarn start course
4. Go to lecture 2 video: http://localhost:3000/resources/lecture-2/
   Locally we do not have the missing captions icon for this.

Have not been able to locally get no icon yet

For the same course video, in both draft and live, we have a missing button for captions on the videojs player + the error

Links:
https://live-qa.ocw.mit.edu/courses/3-091-introduction-to-solid-state-chemistry-fall-2018/resources/lecture-2/
https://draft-qa.ocw.mit.edu/courses/3-091-introduction-to-solid-state-chemistry-fall-2018/resources/lecture-2/

Expected Behavior

1. The icon on videojs player for captions should appear
2. The text tracks should work without errors (currently they're not appearing at all because of the parsing errors)

Actual Behavior

1. Text tracks not working (but icon for captions is appearing) - locally
2. In draft and live, the text tracks are not working + the icon for captions is also not appearing on those videos

Some Information

In the first link above, we just have the error, but the icon on the videojs player for captions does appear. But in the other video mentioned after it, we have the error + captions icon is also not appearing.
Might be related or unrelated. Not sure

(This is untested but should help)
It appears that the error appears for .srt files as they are not supported by videojs. Videojs supports .vtt file.
The .srt worked on videojs for upto 4.11 version, and we are using the ^7.11.8 version.

So an option would be to use an older version.
And another option would be to convert .srt files to .vtt, which there could be different ways to achieve this, one of which could be to use converters, or if it's not too complicated could be written a script to achieve this.

According to a stackoverflow answer:
Would have to add the WEBVTT header in the top, and change , to . (comma to dots in time frames):

0
00:00:05,100 --> 00:00:05,500

to:

WEBVTT

0
00:00:05.100 --> 00:00:05.500

Screenshot or Screencast

[pdpinch]

Thanks for explaining all this Ibrahim. We had decided some time ago to use only Web VTT captions (but not everyone was aware of that).

Where have you come across .srt captions?

[ibrahimjaved12]

Thanks for explaining all this Ibrahim. We had decided some time ago to use only Web VTT captions (but not everyone was aware of that).

Where have you come across .srt captions?

Thanks Peter. Do you mean the source of that?
I was locally running Introduction to Solid Chemistry course. It appears that this error (Text Track parsing errors) comes only because of .srt captions, so that's how I came across it. Plus captions not working for same video on RC/Prod suggested same.

I'm not sure of other such courses as I was randomly testing this one.

[pdpinch]

@ibrahimjaved12 can this be closed now, since we have re-imported the VTT captions for https://ocw.mit.edu/courses/3-091-introduction-to-solid-state-chemistry-fall-2018/ as part of mitodl/ocw-studio#1518 ?

[ibrahimjaved12]

@ibrahimjaved12 can this be closed now, since we have re-imported the VTT captions for https://ocw.mit.edu/courses/3-091-introduction-to-solid-state-chemistry-fall-2018/ as part of mitodl/ocw-studio#1518 ?

@pdpinch
The course has to be republished in order for captions to be loaded. So even though the fix for this has been done, but we still do not have the text tracks yet:
https://ocw.mit.edu/courses/3-091-introduction-to-solid-state-chemistry-fall-2018/resources/lecture-2/
https://live-qa.ocw.mit.edu/courses/3-091-introduction-to-solid-state-chemistry-fall-2018/resources/lecture-2/
This is Carey's comment about it: https://github.com/mitodl/hq/discussions/1505#discussioncomment-5972417

So technically we're not done with the issue until someone republishes the course. I believe this should be closed once we have this up and running in production.