Using SRT Captions/Subtitles in Videojs

[Anan5a]

Description

I want to use SRT subtitles in my videos alongside WebVTT because SRT has a huge selection of subs in sites like subscene.com But it seems support for it was dropped since v4.12+ Additionally suggested BubblesJS library /repository seems dead. the provided link no longer work.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.
Add a <track> element with srt source file inside <video>

Results

Expected

Have option for displaying captions

Actual

Nothing there

Error output

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

7.3.0

browsers

All?

OSes

Android, Windows, Linux

plugins

NO PLUGIN

[mister-ben]

The easiest option is probably just to convert srt to webvtt in advance.

You could convert to webvtt on the fly and load as a remote text track, along these lines.

var srtText = `1
00:00:00,500 --> 00:00:02,000
One caption

2
00:00:03,000 --> 00:00:05,000
Another caption`;
var srtRegex = /(.*\n)?(\d\d:\d\d:\d\d),(\d\d\d --> \d\d:\d\d:\d\d),(\d\d\d)/g;
var vttText = 'WEBVTT\n\n' + srtText.replace(srtRegex, '$1$2.$3.$4');
var vttBlob = new Blob([vttText], {type : 'text/vtt'});
var blobURL = URL.createObjectURL(vttBlob);
player.on('loadedmetadata', function() {
  this.addRemoteTextTrack({
    src: blobURL,
    srclang: 'en',
    label: 'english',
    kind: 'subtitles'
  }, true);
});

The regex is a bit simplistic and there will be edge cases it doesn't work with, there's more robust code to do the conversion part at https://github.com/silviapfeiffer/silviapfeiffer.github.io/blob/master/index.html

[Anan5a]

@mister-ben thanks. But is there any way to convert them on the fly when the video is playing?

[mister-ben]

That's the idea of the js code there. Fetch the captions, convert to vtt and add to the player as a text track with the addRemoteTextTrack API.

[Anan5a]

@mister-ben very very thanks!
I'm now trying to write a function to do the job
But how can I load more than one subtitle using addRemoteTextTrack?
Also how can I sync the sub? The sub is out of sync by 0.5s after conversion

[Anan5a]

@mister-ben Thank you for the RegEx. Successfully implemented on the fly conversion