Vimeo API Test

by doub1ejack

HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <title>Froogaloop2 JavaScript API Example</title>
    <style>
            iframe{
                float: left;
                border:0;
                margin: 20px;
            }
            h4 {
                clear: both;
            }
            a {
                display: block;
            }

        </style>
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  </head>
  <body>
    <h1>Froogaloop2 JavaScript API Example</h1>
    <h2>Thanks to the following:</h2>
    <a href="http://loopmodefiles.com/vimeoapi/froogaloop/froogaloop2/">
            http://loopmodefiles.com/vimeoapi/froogaloop/froogaloop2/
        </a>
    <a href="http://stackoverflow.com/questions/5999357/jquery-and-vimeo-froogaloop-api">
            http://stackoverflow.com/questions/5999357/jquery-and-vimeo-froogaloop-api
        </a>
    <!-- The id="player_1" of the IFRAME must match the query string parameter "playerID=player_1". You also need to api=1 set. -->
    <iframe class="vimeo" id="player1" src="http://player.vimeo.com/video/7100569?api=1&player_id=player1" width="500" height="281" frameborder="0"></iframe>
    <!-- The id="player_2" of the IFRAME must match the query string parameter "playerID=player_2". You also need to api=1 set.  -->
    <iframe class="vimeo" id="player2" src="http://player.vimeo.com/video/240975?api=1&player_id=player2" width="500" height="281" frameborder="0"></iframe>
    <h4>Adapted from Drew Baker @ Funkhaus Design</h4>
  </body>
</html>

JavaScript

jQuery(document).ready(function() {
             
             // Enable the API on each Vimeo video
            jQuery('iframe.vimeo').each(function(){
                Froogaloop(this).addEvent('ready', ready);
            });
            
            function ready(playerID){
                // Add event listerns
                // http://vimeo.com/api/docs/player-js#events
                Froogaloop(playerID).addEvent('play', play(playerID)); 
                Froogaloop(playerID).addEvent('seek', seek);  
                Froogaloop(playerID).addEvent('finish', fin); 
                
                // Fire an API method
                // http://vimeo.com/api/docs/player-js#reference
                Froogaloop(playerID).api('play');
            }
            function play(playerID){
                alert(playerID + " is playing!!!");
            }
            function seek() {
                alert('Seeking');
            }
            function fin() {
                alert('Fin');
            } 
  
        });