Vimeo Universal Player JS API example with Froogaloop

A quick example of how to use Froogaloop to interact with a Vimeo player.

by Zeljko Tadic

HTML

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<p>Countdown status: <span class="status">60</span> of 60 seconds</p>
<p><button>Play</button> <button>Pause</button></p>

JavaScript

var iframe = $('#player1')[0],
    player = $f(iframe),
    status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    //status.text('ready');
    
    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    status.text('paused');
}

function onFinish(id) {
    status.text('finished');
}

var done = false;
var starting_time = 5;
var interval;
function onPlayProgress(data, id) {
    //status.text(data.seconds + 's played');
    if(!done && data.seconds > starting_time )
    { 
        interval = setInterval(updateCountdownText, 1000); // call it every second ;
        done=true;
    }
}


var minutes= 1; // set minutes to the required time
var seconds_left = minutes * 60;// define the countdown

updateCountdownText = function()
{
    console.log(seconds_left);
   status.text(seconds_left);
    seconds_left -= 1;      
    if(seconds_left == 0)
    {
        stopTextColor();
    }
};

stopTextColor = function() {
  clearInterval(interval);
}