I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky.
I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse..
This is all happening within a much larger framework, so i'm just copying in the relevant snippet here;
self.addScrollListener = function()
{
$(window).bind('scroll',self.updateTimelineByScrollPosition);
}
self.current_percent = 0;
self.updateTimelineByScrollPosition = function()
{
var current = $(window).scrollTop();
var max = $(document).height() - $(window).height();
var pos = ( current / max ) * 100;
var seek_time = self.time * pos;
TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead });
}
self.tweenUpdatePlayhead = function()
{
self.jplayer_div.jPlayer( "playHead", self.current_percent );
};
Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element.
Thanks,
Andy