Posted in Uncategorized

Using SRT Captions/Subtitles in Videojs

   September 24, 2020  1 Comment on Using SRT Captions/Subtitles in Videojs

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

Full dicussion on github.com

1 possible answer(s) on “Using SRT Captions/Subtitles in Videojs”

  1. 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