| <!DOCTYPE html> |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> |
| <body> |
| <div class="vimeoFrame"> |
| <iframe class="vimeo" id="player" src="http://player.vimeo.com/video/71174245?api=1&player_id=player" frameborder="0"></iframe> |
| <!--<iframe class="vimeo" id="player" src="http://player.vimeo.com/video/82095744?api=1&player_id=player" width="854" height="480" frameborder="0"></iframe>--> |
| </div> |
| <!--Use CSS to hide video controls. Vimeo provides no known way of |
| doing this. Numbers were obtained by trial and error. --> |
| <style> |
| .vimeo {display:block; width:854px; height:720px; margin:0;} |
| .vimeoFrame {width:854px; height:480px; overflow:hidden; margin:0;} |
| .vimeoFrame .vimeo {margin-top:-120px;} |
| </style> |
| </body> |
| <head> |
| <script src="jquery-2.1.1.min.js"></script> |
| <script src="froogaloop.js"></script> |
| <script> |
| $(function() { |
| video = $f('player').addEvent('ready', ready); |
| |
| function ready(player_id) { |
| video.isready = true; |
| $f(player_id).addEvent('seek', onSeek); |
| } |
| |
| video.seekTo = function(seconds) { |
| video.seeked = false; |
| $f('player').api('seekTo', seconds); |
| } |
| |
| video.play = function() { |
| $f('player').api('play'); |
| } |
| |
| function onSeek(data, id) { |
| video.seeked = true; |
| $f('player').api('getCurrentTime', currentTime); |
| } |
| |
| function currentTime(value, player_id) { |
| var timeElement = document.getElementById('currentTime'); |
| timeElement.textContent = value; |
| video.currentTime = value; |
| } |
| |
| video.seeked = function() { |
| return video.currentTime == video.expectedTime; |
| } |
| |
| })(); |
| |
| </script> |
| |
| </head> |
| </html> |
