Simple Vimeo API Example

Controlling a vimeo video with their Froogaloop javascript API

Vimeo, Javascript, Froogaloop, Video


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:

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">
        <meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes">
        <title>Vimeo Froogaloop API Playground</title>
        <script src="" type="text/javascript"></script>
        <iframe id="player_1" src=";player_id=player_1" width="540" height="304" frameborder="0"></iframe>
        <script src=""></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) {
                var froogaloop = $f(player_id);

                function onPlay() {
                        froogaloop.addEvent('play', function(data) {

                function onFinish() {
                        froogaloop.addEvent('finish', function(data) {