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

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