Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Andy

Tweening video frames

Recommended Posts

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

  • Like 1
Link to post
Share on other sites

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

 

Sounds like more keyframes will help..

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×