Keep Timeline synced with HTML5 Vid

[Stephen]

Hello!  I'm using Timeline to overlay DOM elements on an HTML5 video (to fill in user's faces on top of the pictures in the video).

 

This is working very well, but I was hoping to make it even better.  Right now, JS seems to run a little slow compared to the HTML5 vid and the Timeline falls behind.  Using the video's 'timeupdate' event, I am able to keep it synced with this code:

timeline.seek(videoElem.currentTime);

The timeupdate event fires about 5 times per second for me in Chrome, and in general Timeline stays well synced with the video.

 

Sometimes, however, this can cause a 'bobble' effect - Timeline is slower than the vid, jumps forward with the .seek, is slower than the vid, jumps forward, etc.  This only happens sometimes, I assume when the animation is taking longer for the browser to process.

 

One thought is that a separate JS function, running on a 0.0416 second loop (24 fps) could be constantly .seeking the timeline, but I'm wondering if this would be extremely expensive and/or ignorant of a better way.  The elements would still 'bobble' with this, but the bobbles would be micro compared to 5 times per second.

 

Overall I'm happy with it now, but I'm always looking to improve.  Does anyone have any ideas about how I could keep Timeline synched with an HTML5 video in a better way?  Thank you for your thoughts.

[GreenSock]

That is rather odd because GSAP never runs "slow" in terms of absolute timing - every time it updates, it checks the browser's time and renders accordingly, interpolating the values to be EXACTLY what they should at that moment. I suppose maybe the browser is playing the video faster or something, but that'd be pretty weird too.

 

The only time things can run "slow" simply has to do with when the browser's fps drops below 60fps and that just makes things appear more jerky but things always render precisely where they should on each render (there are fewer steps inbetween, that's all - less frequent renders). 

 

To answer your question, sure, you could definitely just call seek() more often on your timeline to make it appear to be in sync better. I doubt you'd see a major degradation in performance. Typically the biggest bottleneck BY FAR is graphics rendering in the browser, not JavaScript execution. So yes, give that a shot and let us know how things go for you. 

[Carl]

One of our community super stars, Chris Gannon, has done some groundbreaking work with motion-tracking html5 video. You may find the blog post and client work he has done below interesting

 

http://chrisgannon.wordpress.com/2012/06/22/interactive-elements-motion-tracked-onto-html5-video/

 

http://framespark.com/make-your-fathers-day-with-whisky/

 

Send him a note, he might just give you a few pointers. From what I've heard from him, its a bit of hassle but not entirely impossible to sync animation with video.