Web banner - video and graphics out of sync

Hi. I'm using hype for making a web banner.
So I have a video in the background and then some animated graphics on top.
The banner loops and the video and graphics must be in sync.

The problem
So, when I open the banner in browser and then open a new tab wait for a few seconds and go back to the original tab the video and graphics are out of sync. Apparently the video pauses when I exit the view but the graphics continue. How can I fix this?

Best.

you could listen to Document: visibilitychange event - Web APIs | MDN

when the visibility changes check for document.visibilityState -> if it's visible then sync the timeline to the video or vise versa

///////

one note: a real sync of video and timelines is not part of Hypes functionality anyway. both run independent ...

1 Like

Thanks for a quick reply. I'm a total noob when it comes to coding.
Attached is the file I'm working on. Would you be willing to add this method to my file so that I can see how it should be? :pray:
test1.zip (701.0 KB)

if you give an id of video to the video element in the inspector this may work on sceneload:

	document.addEventListener("visibilitychange", function() {
 	 if (document.visibilityState === 'visible') {

	var videoElement = hypeDocument.getElementById('video');
	var currentVideoTime = videoElement.currentTime;
	
	hypeDocument.goToTimeInTimelineNamed(currentVideoTime, 'timelineName')
	hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false)
});

AND still to mention: a real sync of video and timelines is not part of Hypes functionality anyway. both run independent ...

3 Likes