Subtitles for Vimeo: PURE KIFT
UPDATE [12 mar 2010]: There now is an easy to use library implementing subtitles as described below. Read all about it here:vimeo subtitles midityvimeo library.
I found the following movie of the Dutch band De Kift on Vimeo.com. But because it is in Dutch, it would be difficult to share it with you. So I created subtitles. For you!
Dutch, but with subtitles for our English speaking friends
This is how you do it:
The following code was put in the body of this page. If you want to make your own subtitles, change the subtitles variable array and the video_id. You may also want to change width and height.
The same solution should also be possible with Youtube, but I haven't tried yet.
<div id="moogaloop"></div>
<BR>
<div id="subtitles" style="width: 400px; font-size: 18px; text-align: center">Dutch, but with subtitles for our English speaking friends</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
// Create the subtitles:
var subtitles = [
[4,10, "<B>Visit De Kift at http://www.dekift.nl</B>"],
[18, 24, "I am building an organ where we can sit in."],
[25, 28, "That's the idea."],
[29, 34, "A couple of instruments need to be controlled by hand"],
[45, 49, "The only thing a bicycle pump can do of course is: blowing air"],
[49, 53, "I'm working on the nozzle. Not of a trumpet..."],
[53, 56, "... a nozzle that can make a sound."],
[56, 59, "The nozzle of a trumpet does not make a sound by itself..."],
[59, 63, "...you make a sound with your lips."],
[63, 66, "This is a simple little horn..."],
[66, 68, "...with a vibrating thing..."],
[69, 72, "... you won't find that in a trumpet."],
[73, 78, "This is an autonomous horning horn."],
[82, 85, "It's built with a airpump..."],
[86, 87, "... for your airbed..."],
[88, 89, "... or your seal ..."],
[138, 142, "What you want is a clamp that covers the whole length."],
[142, 146, "That can be secured on several places with screws."],
[147, 153, "Now I have three of these things secured with screws with clamps."],
[153, 155, "so now it can not.."],
[155, 157, "Now it must be clamping"],
[164, 166, "Now it is well secured."],
[186, 190, "One of the properties of a vacuum cleaner is that it doesn't blow..."],
[190, 192, "...but it sucks."],
[218, 220, "The autoharp"],
[221, 225, "which is a harp for people who cannot play harp"],
[226, 228, "It has buttons"],
[230, 232, "what these buttons do is.."],
[234, 238, "the strings that do not belong to a particular chord are dimmed"],
[238,243, "So if I want to have the C-Major chord, I have a button here for C-Major"],
[244, 246, "and then"],
[246, 249, "you have to touch it with this hand"],
[250, 253, "you'll hear the C-Major chord"],
[254, 257, "I wanted for the new music.."],
[257, 258.5, "a lot of that kind..."],
[258.5, 260, "not a lot, but.."],
[260, 263, "I was trying to use that kind of instrument"],
[263, 266, "like zither or ...."],
[266.5, 269, "to make something with"],
[269, 271, "Pim our guitarplayer said.."],
[271, 273, "'There are so called Autoharps..'"],
[273, 276, "..which have several chords'"],
[276, 278, "So I searched the Internet,"],
[280, 282, "where I found this machine."],
[290,290,""],
];
var video_id = 9594618; // The Vimeo clip id
var moogaloop = false; // moogaloop will be initialized later, it will be the vimeo swf object
var width = 400; // Width of the movie
var height = 225; // Height of the movie
var swf_id = 'moogaloop'; // The item that will hold the movie (a DIV)
// Initialize the variables necessary for the playback
var flashvars = {
clip_id: video_id,
show_portrait: 0,
show_byline: 0,
show_title: 1,
js_api: 1, // required in order to use the Javascript API
js_onLoad: 'vimeo_player_loaded', // moogaloop will call this JS function when it's done loading (optional)
js_swf_id: 'moogaloop' // this will be passed into all event methods so you can keep track of multiple moogaloops (optional)
};
var params = {
allowscriptaccess: 'always',
allowfullscreen: 'true'
};
var attributes = {};
// This handler will be called when the Vimeo movie is ready in the browser
function vimeo_player_loaded(swf_id) {
moogaloop = document.getElementById(swf_id);
// Add an event listener
moogaloop.api_addEventListener('onProgress', 'vimeo_show_subtitles');
}
// This will loop through the list of subtitles and show one if the time is right
function vimeo_show_subtitles(time, swf_id) {
// find the subtitle
for(var i=0; i<subtitles.length; i++)
{
if ((subtitles[i][0] < time ) && (subtitles[i][1] > time))
{
document.getElementById('subtitles').innerHTML = subtitles[i][2];
return;
} else if (subtitles[i][0] > time ){
document.getElementById('subtitles').innerHTML = "";
}
}
}
// For more SWFObject documentation visit: http://code.google.com/p/swfobject/wiki/documentation
swfobject.embedSWF("http://vimeo.com/moogaloop.swf", swf_id, width, height, "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
Subtitles
Hi John!
This looks interesting!
How did you create the subtitles - with Subtitle Workshop in .srt or .sub format or...?
How can you add and switch between multiple languages and upload them?
Can this be done on a Wordpress.com or Blogger blog too?
(Can a newbie do this or do you need techie knowledge? :)
Thanks!! :)
MidityVimeo Library
Layla,
This blog entry might help you: MidityVimeo Library
You'll still have to code the substitles in JavaScript (I'm working on a better solution). But the enclosed ZIP file contains a nice example on how to do it. Because it currently is built around JavaScript, you might run into problems on some blogging- cms- software. Check your documentation on including JavaScript and flash objects.
John
Youtube functionality
Hi,
first thanks for the great feature. But my question is, will this work with youtube as well?
It doesn't seem to be vimeo specifically. And it would be nice to be able to format the subtitles for a youtube video and not to have to use the limited youtube subtitles.
Thanks.
Re: Youtube functionality
It does not work with Youtube now. As the code is pretty specific for the Vimeo Moogaloop player, you would need to adapt the code for Youtube. I'm interesting in adapting it and make it generic for more players but I'm not gonna do it in the next few months.
This gets attention
Thanks to Ronald: http://www.storytell.in/hdvidz/entry/subtitles_for_vimeo_and_youtube
Thanks for the tutorial, but
Thanks for the tutorial, but things were a little more complicated than necessary because you named the DIV 'moogaloop'. I was never sure where you were calling the div and where you were called the API
Try my MiditiyVimeolibrary
Try my MiditiyVimeolibrary which only needs one command.