| <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> |
