Tweening video frames

[Andy 2 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

I think the smoothness of playback is going to depend on how many keyframes are encoded in the video.

 

Give this thread a read: http://greensock.com/forums/topic/12771-animating-the-playhead-of-video-element-is-it-possible/?hl=ahrengot#entry53668 I think the guys discussed every possible stumbling block.

[Andy 2 Likes (Newbie)]

Great! Thanks for the link Carl, I did have a search but couldn't find the right thread.

 

Sounds like more keyframes will help..

[Andy 2 Likes (Newbie)]

Well, more keyframes definitely help. I've also lowered the bitrate which also helps (buffering kills the effect) .

Chrome refuses to do nice tweening, whether that's to do with scrolling i'm not sure...

IE11 Firefox Safari all do lovely tweens, so I've coded an exception for Chrome to bypass the tween and jump to the target percent.

 

I may put together a codepen to illustrate at some point, if I do I'll post here.

 

Andy