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.