Background video as persistent symbol

Symbols
#1

I'm creating a Christmas card in Hype. I have a falling snow video I'm using as a background and I have made it a persistent symbol.

It works great, seamlessly continuing from scene to scene. My problem is at the start of the project. The video appears maybe half a second after the other elements in my scene. So, when I preview, I see a blank, white background with my foreground elements visible, then half a second later the snowfall video starts.

Any tips to get the animation to start playing right away instead of delaying at the beginning of the first scene as it is doing?

#2

You would need to sync your video and Hype timeline. This snippet would run on symbol load and the main timeline pauses and continues when the video starts, or you could tweak it to switch to the next scene. The event set itself to null after firing to prevent being called again after buffering, etc.

var symbolElement = element;
var video = symbolElement.querySelector("video");
if (!video) return;
hypeDocument.pauseTimelineNamed('timelineName');
video.onplaying = function() {
	hypeDocument.startTimelineNamed('timelineName');
	video.onplaying = null;
};
3 Likes