A Simplified Vimeo (Froogaloop) Javascript API Example
Hi - recently I was trying to utilize the Vimeo Javascript API to do some basic event listening - I wanted to make sure that when one video in a series of videos finished playing, that it would load the next video and play it. Vimeo has 3 different APIs - a simple API which is used primarily to get information about a user’s videos, an advanced API which provides powerful functionality but requires cumbersome OAUTH authentication, and the froogaloop API, which helps facilitate the triggering and listening of basic player methods, which was the API I needed. However, I ran into problems finding the right version of the froogaloop javascript. There seem to be 2 separate GitHub repositories for the code, as well as a vimeo link to a downloadable version. At the time of this writing, both GitHub repositories contain non-working code, but the Vimeo download link contains a working version. A better option, I found after some searching, is their hosted version, available here:
http://a.vimeocdn.com/js/froogaloop2.min.js
At any rate, the example they provide includes all of the api methods and events, supporting multiple video players, and interacting with them using plain old javascript. I didn’t need all this, so I put together a simpler Froogaloop example below that utilizes jQuery, a single player, and does nothing more than listen for the play and finish events for a video. Let me know if you have any questions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes">
<title>Vimeo Froogaloop API Playground</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" width="540" height="304" frameborder="0"></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
$(document).ready(function() {
// Listen for the ready event for any vimeo video players on the page
var player = $('#player_1')[0];
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
console.log('ready!');
var froogaloop = $f(player_id);
function onPlay() {
froogaloop.addEvent('play', function(data) {
console.log('play');
});
}
function onFinish() {
froogaloop.addEvent('finish', function(data) {
console.log('finish');
});
}
onPlay();
onFinish();
}
});
</script>
</body>
</html>