Jaimon's Blog

Managing Vimeo video player via Javascript using Moogaloop API

Vimeo Moogaloop JavaScript Integration

Vimeo is a great web site for sharing videos. It doesn’t have any 10 minute video length restriction as in YouTube. It also has some developer tools to assist in integrating vimeo with your own site. My interest was in the Moogaloop API, and using JavaScript to load a list of files and control the player.

The Moogaloop JavaScript example you can download from vimeo wasn’t working for us (As of Dec 2009).  As it turns out, we weren’t the only people having this problem as this forum post shows. In that forum, one user posted a working example at this blog. His example was working for the first time, but not able to reload another movie. The issue was that the DOM element for the container was getting replaced the first time a movie loads, so the next call to embedSWF will fail due to non-existence of a named element. My minor fix was to check for element existence before calling embedSWF and if not found, create it with a document.createElement call.

In this post we are going to extend on that, and showing a sample where we get a list of movies for a particular user and display it in a list with thumbnail images. Clicking on each link will load the movie in the player area, and will start playing (if auto play is enabled).

To  demonstrate Moogaloop’s event system, I’m displaying a “Please wait” message at the top when somebody clicks on Play, and when we are past the first second of playing, we are  hiding this message. Please see Moogaloop’s API documentation for more details. Although I’ve added two event listeners to show the capabilities, onProgress event should only be used with some caution, as it fires a lot of events every second. If you are using it, make sure the code doesn’t run for more than a few milliseconds.

I’ve also included some wrapper methods to call Moogaloop’s API like play, stop, pause and seek at the end of the JavaScript file. One thing to remember is seek will only work with already buffered data. For example, if the movie is just loaded, and there is only 5 seconds worth data in the buffer, then seekTo(10) won’t work at all.

Using it with other JavaScript libraries

If you are including this script with any other JavaScript code, make sure the global variables I’ve used here don’t create a variable name conflict. Normally I tend to use private JavaScript variables as much as possible. But this post is not intended to be used as a library, but as a starting point to get Vimeo integrated, I haven’t isolated the code as I’ve done in my other blogs here and here.

See it in action

For a live demo, please click here.

Download code

You can download all the required  files as a zip from here.

Cheers,

Jaimon
Advertisements

February 2, 2010 - Posted by | Uncategorized | , , , ,

5 Comments »

  1. Thanks very much, nice bit of code!

    Comment by Gerritt | May 18, 2010 | Reply

  2. “off topic” comment…
    Would you use vimeo over YT ?

    Thx!
    Jenniffer / runningshoesexpert

    Comment by Jenniffer Huang | February 16, 2011 | Reply

    • In my case, I had to use vimeo, as youtube wasn’t allowing me to upload anything more than 11 minutes!

      HTH

      Jaimon

      Comment by Jaimon Mathew | February 16, 2011 | Reply

  3. Absolutely wonderful. — This was just the kind of script I was looking for, and I have to say that you did a lovely job with it.

    I made a couple of tweaks in a few different files (mostly in the CSS, but some minor spots in the JavaScript as well). — I don’t program JavaScript from scratch, but it was pretty easy to maneuver around in the script.

    I will certainly try post a link to my version once our site has gone live.

    There were only 2 concerns I had with the script.

    First, people who use quotation marks in the title of their Vimeo video will show up in the playlist, but will not actually play. It doesn’t effect the other videos in the list, but those particular videos do not play when they are clicked on. (I think it has to do with too many of the same type of quotes in the Javascript grammar.) — For now I will ask my client not to use quotation marks when they write their titles to their Vimeo videos, but it might benefit other users to limitations of the script. (And maybe we can see a fix and a version 2.0 in the future? ;D)

    Second, is there any way to have the script callback more than 20 videos in a playlist? I looked to see how it was limiting the video count callback, but I couldn’t figure it out. Any ideas for a work around this particular instance?

    Cheers!

    Comment by Bara Fubuki | May 15, 2011 | Reply

  4. Hi! I have bin looking on your script and changed some codes to make it work better with my webpage but are there any way to get 4-5 or more thumbnails instead of the 3? I can’t seem to find anywhere in the script how to change this.

    Thanks!

    Comment by danell | September 19, 2011 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: