Synchronize three js gltf animation with html video

[carstenm74]

Hi!

 

I am creating a website where a pre-rendered character (html video) is doing things with three js realtime-rendered objects. In Firefox and chrome, it works fine; just playVideo() and starting the gltf animation will produce a synchronized effort of both the character and his prop.

 

In Safari however, things are going different. The video will lag behind by about half a second.

 

Is there a way to use GSAP to properly synchronize the two? Or some other workaround?

[Rodrigo]

Hi @carstenm74 and welcome to the GSAP Forums!

 

Sorry to hear about the problems, but this sounds more like a safari rendering issue rather than a GSAP related one.

 

The easiest and simplest solution is to detect Safari browsers and warn users that the browser is not supported. I'm not a mac user so I don't know how many mac owners use safari as their default browser, but most likely they should have chrome installed, so indicate that the website has been developed for FF and Chrome.

 

Other alternative is to create a different animation for safari that maybe doesn't include the video.

 

Another option is re-encode the video with some parameters that would make it go smoother, maybe have a look at this thread:

 

Unfortunately this is not a GSAP related issue so there is not a lot we can do about it, since we don't have the time resources to provide free general consulting and we need to focus our attention on GSAP related problems in these free forums.

 

Hopefully this helps.

Happy Tweening!