How To Load a SRT/VTT File from a URL

As more streaming services move online you are probably watching your favorite movies and TV series in a browser. If you use Netflix or HBO GO, accessing closed captioning (CC) or VTT/SRT files is plain sailing. However, a lot of free services don’t offer CC by default and even if it’s available, chances are the language is not English.

This is why you need to resort to loading SRT/VTT from URL. For those who have never done it before, the method might seem overwhelming because it involves GitHub Gist, Google DevTools, and basic coding. But if you follow the steps to the T, you shouldn’t have any problems to load the given files.

How to Load SRT/VTT from URL

Step 1

First, you need to download and install Visual Studio Code and get the subtitle/SRT file for the movie/series you’d like to watch. And don’t worry there won’t be any serious coding, just some simple copying and pasting.

Step 2

Launch Visual Studio Code and enter the following lines:

1  var thisWidth = jwplayer(‘media-player’).getWidth();

2  var thisHeight = jwplayer(‘media-player’).getHeight();

3

4  var suck = jwplayer(‘media-player’)[0].allSources;

5  jwplayer(‘media-player’).setup({

6     “playlist”:[{“sources”: suck, “tracks”: [{“file”:””, “label”:”English”, “kind”: “captions”,  “default”: true}]}]

7      “width”: thisWidth,

8       “height”: thisHeight

9  });

 

Note: The numbers represent the lines of code. They pop up by default as soon as you start copying and pasting and are not part of the code. Make sure not to miss anything or the trick won’t work.

Step 3

With the hard part out of the way, now is the time to make your CC URL. Launch https://gist.github.com , grab the subtitles file and drop it into Gist Github main window.

You’ll see two separate windows, scroll up and delete the first one by clicking on the trashcan icon. The window that has “subtitles.srt” in the text box should remain. Scroll to the bottom of the page and click the “Create public gist” button, this turns your subtitles into time-stamped code.

Finally, hit the RAW button on the top right of the Gist window to get the code in a URL.

Important Note: Don’t close any windows, Visual Studio Code or Gist Git hub because you’ll need them for other steps.

Step 4

At this point, you can go to the online movie or series you’d like to watch in Chrome. For the purposes of this write-up, we’ve used 123Movies and tested it on the Nocturnal Animals movie. In any case, the trick should work for other platforms and videos as long as they support JW player for HTML5.

To move on, right click on an empty spot inside the browser (with the movie on) and select Inspect. This brings up DevTools and you need to click the Console tab.

The DevTools layout might look a bit different in your browser, but the functions and destinations are the same.

Step 5

Go back to the Visual Studio Code window and copy, then paste, the code into the DevTools Console. (You’ve entered the code in Step 2.)

Afterwards, go to the Gist Github window and copy the subtitles’ URL. To be precise, select everything in the address bar and hit cmd or Ctrl + C keys on your keyboard.  Now, you need to paste the URL into the exact location inside the code, it’s line 6 as given below.

“playlist”:[{“sources”: suck, “tracks”: [{“file”:””, “label”:”English”, “kind”: “captions”,  “default”: true}]}]

 The destination is the empty parenthesis “” next to [{“file”: and the entire URL goes inside the parenthesis. Mind you, this step is crucial and you shouldn’t miss the spot or it won’t work.

Step 6

To confirm the changes, click next to the last line (9  });) inside Console, your cursor should be just behind the semicolon. Then hit Enter and another line of code should appear automatically to confirm you’ve done everything correctly.

Step 7

Click on the X icon to exit DevTools and you can also close Gist Github and Visual Studio Code as you won’t need them anymore. Click on the play button and then CC to load the subtitles into the movie/series. You should immediately see them in the player.

Some Words of Wisdom

One downside of this method is the issue of the embedded subtitles. A lot of online movies and series on off-brand streaming services come with built-in subtitles that cannot be turned off. Needless to say, watching your favorite videos with two sets of CC is distracting, to say the least.

Another thing you need to consider is the CC frame rate. The general video standard is 30 fps, but then a lot of online movies have it at around 24 fps. This means you might need to test out a few SRT files to determine which one works best.

Basic Hacking Skills Galore

Truth be told, the only hard part is getting the code inside Visual Studio Code without making any mistakes. And then you also need to nail the place for the SRT URL inside the DevTools Console. This method should work with VTT files as well and if it doesn’t there are apps that can convert VTT to SRT.

One way or the other, has this method worked for you? What streaming websites have you used it on? Tell us all about your experience in the comments section below.