MidityVimeo 2.0 – Subtitles for Vimeo


Overall structure

To have subtitles for Vimeo movies, we need to have an overall structure. The idea is like this:

  1. Embed a few Vimeo movies on a page
  2. Add subtitles in a simple JavaScript array
  3. Add a placeholder (a <div>) for every subtitled movie
  4. The library will add the necessary handlers to the movie-players, triggered every few milliseconds while playing the movie
    1. The handler will take the playing time
    2. find the subtitle
    3. put one subtitle text in the subtitle div

Vimeo Player API

Full documentation of the API is available on GitHub where you also can find the sources. What follows here is a description of the parts I will use for the MidityVimeo library.

The Vimeo embed code looks like this:

<iframe src="https://player.vimeo.com/video/9594618" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

The API can be loaded from Vimeo’s servers.

<script src="https://player.vimeo.com/api/player.js"></script>

Then, the player must be attached to the movie in the IFrame, after which the JavaScript API is fully active. In the example below, two logging functions were added:

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
    console.log('played the video!');
});

player.getVideoTitle().then(function(title) {
    console.log('title:', title);
});

Not the use of JavaScript Promises.
The MidityVimeo library will use the above setup to add subtitles to Vimeo movies by adding an event handler for the ‘timeupdate‘ event of the API.

Simple subtitles array

In order to be able to use the MidityVimeo library, you’ll need to add the JavaScript of it to your page along with the Vimeo Player API.

<script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="MidityVimeo.js" ></script>

Then add a piece of code that places subtitles in an array. Below is the simplest solution, just an assignment, but you could get it from a server or read it from a file.

var subtitles = [
    [1,10, "<B>Visit De Kift at <a href=\"http://www.dekift.nl\">dekift.nl</B>"],
    [18, 24, "I am building an organ where we can sit in."],
    //
    //etc.etc.
    //
    [280, 282, "where I found this machine."],
    [290,290,""],
];

In this example, the first subtitle starts after 1 second, and is removed after 10 seconds of playing. Then, when the movie reaches 18 seconds, the second subtitle is displayed.

To link a subtitle array to a movie, you’ll need to use the ID of the movie which is in the URL. For the above movie, the ID is 9594618.  Below will put a subtitles for movie 9594618 in a div with id subtitles_9594618.

MidityVimeoLib.showSubtitles(9594618, subtitles, "subtitles_9594618");

That’s all, pretty simple.

 

Download/fork it at GitHub: MidityVimeo

Leave a Reply

Your email address will not be published. Required fields are marked *