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,
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.
— 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.
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.
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,
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,
- 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…
- Finding a purely JavaScript way of parsing the subtitle files
- The method should not require manual checking and cleaning of the array generated.