<html><head> <title>Vimeo Video Test</title> <script type="text/javascript" src="jquery-2.1.3.min.js"> </script> <script type="text/javascript" src="froogaloop.js"></script> <style type="text/css"></style> <script type="text/javascript"> $(function(){ var iframe = $('#player')[0], player = $f(iframe), status = $('.status'), duration = $('.duration'); // When the player is ready, add listeners for // pause, finish, and playProgress vimeo_player = player.addEvent('ready', onReady); function onReady(id) { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('play', onPlay); player.addEvent('playProgress', onPlayProgress); vimeo_player.duration = 0.0; play.click(); } // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); function onPlay(id) { vimeo_player.status = 'play'; status.text('play'); } function onPause(id) { vimeo_player.status = 'pause'; status.text('pause'); } function onFinish(id) { vimeo_player.status = 'finished'; status.text('finished'); } function onPlayProgress(data, id) { vimeo_player.duration = data.seconds; duration.text(data.seconds); } }); </script> </head> <body> <iframe id="player" src="http://player.vimeo.com/video/71174245?api=1&player_id=player" width="1024" height="576" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""> </iframe> <p>Duration: <span class="duration">0.0</span></p> <p>Video status: <span class="status">Not Ready</span></p> <p><button id="play">Play</button> <button id="pause">Pause</button></p> </body></html>