There was a movie I desperately wanted to watch but I couldn’t find a version with subtitles uploaded ANYWHERE online. (The movie was in a language I didn’t know).

This had been a recurring situation. The full movie is there in all its epicness, but no subs!! However, the subtitles were often easily findable via Google.

I tried watching the movie while reading the subtitles on another window…but no dice! I kept falling behind or ahead of the actual dialogue and juggling took away from the movie…

One day when browsing Flowplayer’s features (a popular video player for the web), I noticed the nature of the subtitle files they use, and decided to try and write some JavaScript code that could sync subtitles with a video.

Flowplayer’s documentation,

The WebVTT file used in the Flowplayer demo,

1
00:00.000 --> 00:02.000
This here is a subtitle.
Works on all browsers. Styleable with CSS.

2
00:02.000 --> 00:04.000
Subtitles are defined in a <b>VTT</b> file

3
00:05.000 --> 00:07.000
For each subtitle you configure the start time, end time and text

4
00:08.000 --> 00:12.000
This one is bigger

5
00:14.000 --> 00:17.000
In general you should not style subtitles and let your audience focus on the video

6
00:19.500 --> 00:22.000
This is the last one

7
00:28.000 --> 00:29.000
Bye

I started with testing mp4 videos which unlike flash, were playable via the HTML5 <video> tag.

The first step was to convert the webVTT data into an array,

var myArray = [
    [1, 0.0, 2.0, "This is the first subtitle.", "Styleable with CSS."],
    [2, 2.0, 4.0, "This is the <b>second</b>"],
    [3, 5.0, 7.0, "For each subtitle you configure the start time, end time and text"],
    [4, 8.0, 12.0, "This one is <font size=200%> bigger </font>"],
    [5, 14.0, 17.0, "In general you should not style subtitles and let your audience focus on the video"],
    [6, 19.5, 22.0, "This is the last one"],
    [7, 25.0, 27.0, "Bye!", "=D"]
];

I then played around using W3Schools to figure out how to get it working.

This is the relevant code,
Html,

<button onclick="getCurTime()" type="button">Get current time position</button>
<button onclick="setCurTime()" type="button">Set time position to 5 seconds</button>

<video id="video1" controls="controls">
  <source src="BigBuckBunny_640x360.mp4">
  Your browser does not support HTML5 video.
</video>
<p id="subs">Subtitles should appear here</p>

JavaScript,

myVid=document.getElementById("video1");

function getCurTime() { 
    alert(myVid.currentTime);
} 
function setCurTime() { 
    myVid.currentTime=5;
} 

var myArray = [
    ["number","start","stop","line1","line2"],
    [1, 0.0, 2.0, "This is the first subtitle.", "Styleable with CSS."],
    [2, 2.0, 4.0, "This is the <b>second</b>"],
    ...
];

myVid.addEventListener("timeupdate", Ace, false);

function Ace() {
    //Cycle through arrays and check if current time is >= to Start but < Stop
    for(var i = 1; i < myArray.length; i++) {
        if(myVid.currentTime >= myArray[i][1] && myVid.currentTime < myArray[i][2]) {
            var a = myArray[i][3];  //line1
            var b = myArray[i][4];  //line2
            //if array has one line (length 4) vs. two (length 5)
            if (myArray[i].length == 4) { document.getElementById("subs").innerHTML=a}
            else { document.getElementById("subs").innerHTML=a+"
"+b; }
        }
    }
}

And here it is in action

I then added the ability to tweak when the subtitles began.

Play with it here

Ok so this works, but how about using it on some real subs?! Or the elephant in the room, flash videos? See the next post.

Update (April 2015):

For more on the <track> tag, see this article. The tag is supported by most modern browsers and works directly with WebVTT files. All you need is to include it in your html.

For our purposes, the <track> tag is only useful if you can somehow obtain an mp4 or other supported format of the video of interest. However, this is unideal. The goal here, is to watch the video on the original site (without having to download it).