Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

sync video seeker with timeline.

  • Loading branch information...
commit 5d5e33144ad41383ee46dfe63e49eb5867fa95f0 1 parent b0d41c9
@pestrella authored
Showing with 21 additions and 11 deletions.
  1. +1 −1  demo/index_paolo.html
  2. +20 −10 demo/js/player.js
View
2  demo/index_paolo.html
@@ -70,7 +70,7 @@
<div id="lane-viewport" style="visibility: visible; height: 238px; cursor: default; ">
- <div id="lane" data-lane-id="t8gqrmzsbd64s519urkho4ofe3le9o8x" data-lane-title="Personal Lane" data-lane-description="A personal lane containing all your content." data-user-id="1f09d08636818854b1c1ccf907470305" style="height: 238px; width: 20702px; position: absolute;">
+ <div id="lane" data-lane-id="t8gqrmzsbd64s519urkho4ofe3le9o8x" data-lane-title="Personal Lane" data-lane-description="A personal lane containing all your content." data-user-id="1f09d08636818854b1c1ccf907470305" style="height: 238px; width: 800px; position: absolute;">
<div class="lane-slot" id="1253491200">
<div class="lane-circle"></div>
View
30 demo/js/player.js
@@ -1,13 +1,9 @@
$(document).ready(function() {
console.log('ready...');
- var logTime = function(player) {
- var timeInterval = setInterval(function() {
- console.log('> ' + player.currentTime);
- }, 5000);
- }
var timelineScrolling = function(player) {
var timeInterval = setInterval(function() {
+ console.log('length: ' + player.duration);
console.log('move it!');
$('#lane').animate({"left": "-=20px"}, "slow");
}, 5000);
@@ -16,11 +12,25 @@ $(document).ready(function() {
$('video').mediaelementplayer({
success: function(player) {
console.log('playing: ' + player.src);
- //logTime(player);
- /* TODO: requires callback which moves the timeline
- * e.g. timeline.moveTo(player.currentTime);
- */
- timelineScrolling(player);
+ //timelineScrolling(player);
+
+ player.addEventListener('seeked', function(event) {
+ //console.log('you seeked!');
+ var videoLength = player.duration;
+ var elapsed = player.currentTime;
+ var timelineWidth = $('#lane').width();
+ var seekPosition = Math.round((elapsed / videoLength) * timelineWidth);
+ console.log('seek position: ' + seekPosition);
+
+ var timelineRemainder = timelineWidth - seekPosition;
+ var videoRemainder = Math.round(videoLength - elapsed);
+ console.log('must scroll ' + videoRemainder + 'secs of timeline');
+
+ $('#lane')
+ .stop()
+ .animate({left: -1 * seekPosition}, {duration: 500})
+ .animate({left: -1 * timelineRemainder}, {duration: videoRemainder * 1000});
+ });
}
});
});
Please sign in to comment.
Something went wrong with that request. Please try again.