Here is a quick recipe to add subtitles to a video you are embedding from Vimeo to your website. It uses jQuery to parse a standard subtitles .srt file and allows you to fully customise the timed display of subtitles as the video is playing.
It will take you about 39 minutes to cook and these are the ingredients:
* a Vimeo embed code, pasted somewhere in your page
<iframe src=”http://player.vimeo.com/video/11079465…
* jQuery, included in your webpage, either in the head or at the end of the body
<script src=”http://example.com/path/to/jquery.min.js”> </script>
* the Vimeo player JavaScript API (aka Froogaloop), included in your webpage, either in the head or at the end of the body
<script src=”http://a.vimeocdn.com/js/froogaloop2.min.js”> </script>
The method:
1. Go to UniversalSubtitles and create subtitles for your chosen video.
2. Download the .srt file.
3. Use ajax to get the srt file
$.ajax({ method: ‘get’, url: theSrtUrlGoesHere, success: parseSubtitles});
4. Parse the subtitles:
var subtitles = []
function parseSubtitles(srt)
{
var records = srt.replace(/(\r\n|\r|\n)/g, ‘\n’).split(‘\n\n’)
var r = 0
$(records).each(function(i)
{
subtitles[r] = []
return (subtitles[r++] = records[i].split(‘\n’))
})
}
5. Watimecodeh the Vimeo player, listening to the main playback event:
var vimeoPlayer = $(‘iframe’).first()
Froogaloop(vimeoPlayer).addEvent(‘playProgress’, onPlayProgress)
6. Display subtitles when the video is playing:
var subcount = 0
function onPlayProgress(data)
{
var subtitle = ”
var seconds = Number(data.seconds).toFixed(1)
var min = timecodeFrom(subtitles[subcount][1])
var max = timecodeTo(subtitles[subcount][1])
if (seconds > min && seconds < max) subtitle = subtitles[subcount][2]
if (seconds > max && subcount < (subtitles.length - 1)) subcount++
$(‘#subtitles’).html(subtitle)
}
function timecodeFrom(timecode)
{
var timecodePair = timecode.split(’ —> ‘)
return timecodeSeconds(timecodePair[0])
}
function timecodeTo(timecode)
{
var timecodePair = timecode.split(’ —> ‘)
return timecodeSeconds(timecodePair[1])
}
function timecodeSeconds(timecode)
{
var secs, timecode1, timecode2
timecode1 = timecode.split(‘,’)
timecode2 = timecode1[0].split(‘:’)
return (secs = Math.floor(timecode2[0] * 60 * 60) + Math.floor(timecode2[1] * 60) + Math.floor(timecode2[2]))
}
