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
5 Comments »
Leave a comment
-
Recent
- Check digit calculator for barcodes and credit cards
- An Excel Addin to work with Unicode CSV files
- SimpleImageInfo – A Java class to get image size without loading the whole data
- Making Scrollable Tables with fixed headers – Updated
- Migrating 10g JSF Web project with ADF Faces components in jspx pages to 11g Facelets pages using Rich components
- Monitoring Log4J messages on a browser via server push
- Managing Vimeo video player via Javascript using Moogaloop API
- Making Scrollable Tables with fixed headers
- C# FTP Client Library
-
Links
-
Archives
- April 2013 (1)
- August 2011 (1)
- January 2011 (1)
- March 2010 (1)
- February 2010 (4)
- September 2009 (1)
-
Categories
-
RSS
Entries RSS
Comments RSS
Thanks very much, nice bit of code!
Comment by Gerritt | May 18, 2010 |
“off topic” comment…
Would you use vimeo over YT ?
Thx!
Jenniffer / runningshoesexpert
Comment by Jenniffer Huang | February 16, 2011 |
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 |
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 |
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 |