blob: 6d72222d19b786d1385811890c64a7e9c30ff8fe [file] [log] [blame]
<!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>