How to fade in an image in sync with video

🧑‍💻 Technical Support
1

I need to have a png displayed after exactly 21 seconds from when the video over the target has been set to play (I am using the “image target with video sound” template).

Ideally the png should be “in sync” with the video, I mean it should appear (with a slow fade in if possible) after exactly 21 seconds of the video and should disappear when the video reaches 31 seconds. If the target is lost, of course the count down should be “stopped” until the video is resumed again.

Is there any way to achieve this result ?

2

You could set a settimout function after the initial vidoe is clicked.

3
  1. If you add the image as an a-image, you can add a delay to the animation.
  2. If the image is an HTML element, then use a delay in the CSS animation.
  3. You can set an event listener on the video element, listening for timeupdate, and start the animation when 21 seconds have passed.

If you want to take pausing and resuming into account, then the third option is the most viable one.

1 Like