Simple Vimeo API Example

Controlling a vimeo video with their Froogaloop javascript API

Vimeo, Javascript, Froogaloop, Video

12/06/2011

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&amp;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>