1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 3 <body> 4 <div class="vimeoFrame"> 5 <iframe class="vimeo" id="player" src="http://player.vimeo.com/video/71174245?api=1&player_id=player" frameborder="0"></iframe> 6 <!--<iframe class="vimeo" id="player" src="http://player.vimeo.com/video/82095744?api=1&player_id=player" width="854" height="480" frameborder="0"></iframe>--> 7 </div> 8 <!--Use CSS to hide video controls. Vimeo provides no known way of 9 doing this. Numbers were obtained by trial and error. --> 10 <style> 11 .vimeo {display:block; width:854px; height:720px; margin:0;} 12 .vimeoFrame {width:854px; height:480px; overflow:hidden; margin:0;} 13 .vimeoFrame .vimeo {margin-top:-120px;} 14 </style> 15 </body> 16 <head> 17 <script src="jquery-2.1.1.min.js"></script> 18 <script src="froogaloop.js"></script> 19 <script> 20 $(function() { 21 video = $f('player').addEvent('ready', ready); 22 23 function ready(player_id) { 24 video.isready = true; 25 $f(player_id).addEvent('seek', onSeek); 26 } 27 28 video.seekTo = function(seconds) { 29 video.seeked = false; 30 $f('player').api('seekTo', seconds); 31 } 32 33 video.play = function() { 34 $f('player').api('play'); 35 } 36 37 function onSeek(data, id) { 38 video.seeked = true; 39 $f('player').api('getCurrentTime', currentTime); 40 } 41 42 function currentTime(value, player_id) { 43 var timeElement = document.getElementById('currentTime'); 44 timeElement.textContent = value; 45 video.currentTime = value; 46 } 47 48 video.seeked = function() { 49 return video.currentTime == video.expectedTime; 50 } 51 52 })(); 53 54 </script> 55 56 </head> 57 </html>
