Musings of a Fondue

Subtitles Using JavaScript - Part 2

Having succeeded with the <video> tag, I wanted to try implementing subtitles for flash videos - the format which most video content on the web is distributed in.

However I quickly learned that each flash player has its own unique way (via APIs) of getting information about a video’s current time. This meant that for now at least, my implementation would not be universal.

So, I tested the waters with YouTube’s JavaScript API.

I used this snippet by Rob W. as starter code for interaction with the API. And after a lot of reading, and trial and error I got this,

image


var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: '0JnTThZMJAg',
    });

    document.getElementById('grabTime').onclick = function grabTime() {      
        document.getElementById('time').innerHTML = player.getCurrentTime();
    };

    player.addEventListener("onStateChange", "onplayerStateChange");   
}


With getCurrentTime() working, it was easy to implement subtitles as was done with the <video> tag in the previous post.

image

Here it is live


Subtitles from a movie

I then decided to try it out with a scene from the an actual movie.

I got the subtitles for the movie Skyfall. However to use them, I needed to convert them into an array.

I wasn’t sure how to approach this using just JavaScript so I used Excel and its inbuilt functions to do the conversion.

image

image

I also converted the HH:MM:SS:MLS time format to seconds.

I then used Chrome Inspector to debug the array. The main issue was the use of quotation marks within the dialogue (for example when a character was quoting another character) which led to broken strings.

image

Trivia: Did you know “007” is mentioned 16 times in the film? (at least according to these subs).

Here is the scene from Skyfall synched to the subs,

image

View it live here

I offset the subtitles start time to match the time the clip starts in the film. Try entering different times to see what happens.

Onwards

Once I learn more about programming and how the web works I plan on,

  1. Revisiting a universal flash solution
    • Currently, each flash player (e.g. JWPlayer, Vimeo, YouTube, Flowplayer) has its own unique API for getting information about the video it’s playing. Unless one can find a way to get the current time independent of the flash player used, a universal solution is not possible…
  2. Finding a purely JavaScript way of parsing the subtitle files
    • The method should not require manual checking and cleaning of the array generated.

Comments