1 <html><head> 2 <title>Vimeo Video Test</title> 3 <script type="text/javascript" 4 src="jquery-2.1.3.min.js"> 5 </script> 6 <script type="text/javascript" src="froogaloop.js"></script> 7 <style type="text/css"></style> 8 <script type="text/javascript"> 9 $(function(){ 10 var iframe = $('#player')[0], 11 player = $f(iframe), 12 status = $('.status'), 13 duration = $('.duration'); 14 15 // When the player is ready, add listeners for 16 // pause, finish, and playProgress 17 vimeo_player = player.addEvent('ready', onReady); 18 19 function onReady(id) { 20 status.text('ready'); 21 player.addEvent('pause', onPause); 22 player.addEvent('finish', onFinish); 23 player.addEvent('play', onPlay); 24 player.addEvent('playProgress', onPlayProgress); 25 vimeo_player.duration = 0.0; 26 play.click(); 27 } 28 29 // Call the API when a button is pressed 30 $('button').bind('click', function() { 31 player.api($(this).text().toLowerCase()); 32 }); 33 34 function onPlay(id) { 35 vimeo_player.status = 'play'; 36 status.text('play'); 37 } 38 39 function onPause(id) { 40 vimeo_player.status = 'pause'; 41 status.text('pause'); 42 } 43 44 function onFinish(id) { 45 vimeo_player.status = 'finished'; 46 status.text('finished'); 47 } 48 49 function onPlayProgress(data, id) { 50 vimeo_player.duration = data.seconds; 51 duration.text(data.seconds); 52 } 53 }); 54 </script> 55 </head> 56 <body> 57 <iframe id="player" 58 src="http://player.vimeo.com/video/71174245?api=1&player_id=player" 59 width="1024" height="576" frameborder="0" 60 webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""> 61 </iframe> 62 <p>Duration: <span class="duration">0.0</span></p> 63 <p>Video status: <span class="status">Not Ready</span></p> 64 <p><button id="play">Play</button> <button id="pause">Pause</button></p> 65 </body></html> 66
