Jump to content
Search Community

Background video sync with timeline in banner

aleh test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I am trying to create a banner with timeline animation and a background html5 video. I am trying to keep the video in sync with the timeline, which is also working pretty well in the codepen example. That being unless you switch to another tab or scroll down on a page so the banner is out of sight, then it seems the animation is pause while the video continues to play and therefore gets out of sync.

 

So what is the best practice here? to always keep them in sync? Can I listen for when the timeline is in pause mode and then pause the video, or can the timeline pauses be deactivated?... or a 3rd option :)

 

Perhaps someone has an example on this or maybe an earlier topic which I couldn't find?!

 

Thanks!

 

 

/Alex

 

 

 

See the Pen XgMMWR by alexhannibalsen (@alexhannibalsen) on CodePen

Link to comment
Share on other sites

Hey @aleh!

 

Welcome to the forums!

 

The short answer is: when you go to another tab, GSAP's rendering slows down to next to nothing because of Request Animation Frame, that happens because performance. What you can do is link the playback of the video to the timeline instead of having it play on its own.

 

If I get some time later on today, I'll put a pen here showing how you can achieve that (Or you can beat me to it and do it yourself).

 

:D

 

  • Like 1
Link to comment
Share on other sites

I'm back!

 

See bellow:

 

See the Pen RggrRy by dipscom (@dipscom) on CodePen

 

The catch here is the video codec. You need to pay attention to that or the video playback is not going to be smooth. Sometimes it will look downright broken. I wasted a lot of time before realising it, thinking something was wrong with the code. I have left the original video you had as an example of bad Codec.

  • Like 6
Link to comment
Share on other sites

5 hours ago, Dipscom said:

I'm back!

 

See bellow:

 

See the Pen RggrRy by dipscom (@dipscom) on CodePen

 

The catch here is the video codec. You need to pay attention to that or the video playback is not going to be smooth. Sometimes it will look downright broken. I wasted a lot of time before realising it, thinking something was wrong with the code. I have left the original video you had as an example of bad Codec.

Thanks so much! and ok, I will try and see if I can find out which codec you used :)

Link to comment
Share on other sites

  • 4 weeks later...
On 6/22/2017 at 3:25 PM, Dipscom said:

I didn't use any obscure one. That's what I am warning you about. Just use whatever standard codec you have, if for some reason the video is not playing smoothly, you will know why.

 

 

 

Hi Dipscom :)

 

Is it me, or doesn't it start the text animation without waiting for the video (try incognito window) ? ... then if you refresh it (with cached video) then it works fine!... any idea what to do here?

Link to comment
Share on other sites

Yes, you're right. The animation waits for the video but I think I have made a mistake on the setup as the event won't always fire correctly.

 

I shall amend the example to listen to the events carefully as I think the event is being fired before we even listen to it.

 

Once I fix it, I'll let you know.

Link to comment
Share on other sites

37 minutes ago, Dipscom said:

I've done a bit of work on it, should play ok now.

 

However I have found so many holes in this example that I will re-write it all. As is, it's not going to work in a real-world scenario. 

 

Yeah I can see they start together now, but it seems to be a bit jumpy/hacky in the video now?!. 

 

I spend a lot of hours with my limited JS skills without a satisfying turnout, but it strickes me as something very usefull for people who wants to have video and text animations running together in fx Google DoubleClick banners.

 

Jack also suggested to use "lagSmoothing", but I like the idea of the banner being paused (if possible) when browser tab is not selected or banner frame is not visible on page.

 

If you have the time to re-write it I will be very thankfull and interested in what you come up with. I have not been able to google anything which could bring me all the way :)

 

 PS: if jQuery could be left out it would be awesome, as it is heavy and not recommended to use in fx DoubleClick

 

Thanks again Dipscom

 

 

Link to comment
Share on other sites

Here's some news for you @aleh: I have never really used jQuery. It might have been an amazing tool back in the day but I still have to find a reason to use it.

 

So, the short of the story is that I was doing things backwards. Initially I was trying to get the timeline to control the video. It was causing all manner of conflicts and whatnot. Even made me think there were issues with the codec. But in the end it was all my own fault.

 

Bad Pedro! :(

 

So, sorry about that.

 

I've made some improvements but there's still some issues. There's a nasty bunch of errors when using Safari, I will need help from @GreenSock in order to debug that, no idea what's going on there. On Firefox and Safari the timeline is not playing smoothly but I have a suspect and will try to find a solution to that.

 

The amends are all on the original pen, check it out when you have a moment.

 

@GreenSock could you offer me a pointer why I'm getting a 'maximum call stack size exceeded' only in Safari?

 

Link to comment
Share on other sites

On 7/15/2017 at 6:01 PM, Dipscom said:

Here's some news for you @aleh: I have never really used jQuery. It might have been an amazing tool back in the day but I still have to find a reason to use it.

 

So, the short of the story is that I was doing things backwards. Initially I was trying to get the timeline to control the video. It was causing all manner of conflicts and whatnot. Even made me think there were issues with the codec. But in the end it was all my own fault.

 

Bad Pedro! :(

 

So, sorry about that.

 

I've made some improvements but there's still some issues. There's a nasty bunch of errors when using Safari, I will need help from @GreenSock in order to debug that, no idea what's going on there. On Firefox and Safari the timeline is not playing smoothly but I have a suspect and will try to find a solution to that.

 

The amends are all on the original pen, check it out when you have a moment.

 

@GreenSock could you offer me a pointer why I'm getting a 'maximum call stack size exceeded' only in Safari?

 

Hi,

 

I had a look, and video/animation is running a lot smoother together now!. The Hacky/jumpyness is gone! 

 

But text animation seems to be starting again before video when playing in Incognito. Also when looking twice, I do not think the video/animations is paused now when switching to another tab!.. is it?

 

Holly molly, this is more complex than I first thought it would be! ;)

 

 

Link to comment
Share on other sites

Now you know why there isn't a river of options when it comes to video and animation playing in sync.

 

Don't know if you read the new comments in the updated code but video does not slow down/stops when the window you have it goes out of focus. Only RequestAnimationFrame powered animations do. That's why we're checking at every frame in the animation and matching its time to the video time. But still, there are problems with it.

 

There's a horrible max call stack error in Safari and there's some jerkiness in Firefox. It only plays smooth in Chrome and Opera and even there, as you might have noticed, it doesn't quite loop right.

 

I'm a bit too busy in the next few days but I will come back to this to try and fix it. Unless, of course, someone else sweeps down and shows us a 100% safe solution.

Link to comment
Share on other sites

Banner visibility because of scroll is a completely different kettle of fish. Even RaF does not take that into consideration.

 

You can either write a bunch of code to try and detect if your banner is above the fold or not or use (if available) whatever method the ad-platform offers.

 

So, yes, the Page Visibility API is only to check if the browser window is on focus or not.

Link to comment
Share on other sites

ok, but that is what I am looking for.. away to pause video with timeline on "other tab" and on "scroll"... starting to think it is too difficult... Maybe just a simpler version where they are synced at all times but does not pause... do you have an example on that? Fx combining your sync script with what Jack wrote about (lagsmoothing).

 

 

Link to comment
Share on other sites

@aleh, I've made some changes and now the video and timeline plays smoothly for me. 

 

Safari, unfortunately does not play ball completely. It seems to hang a bit too long before rendering the new frame when it's repeating but there's not much I can do to improve it.

 

Now, there's plenty more to this that could be done. Like, match the timeline when the user seeks to another time in the video, when pause and so on. I might add all of that and might even try to add the visibility API into it at some point but don't hold your breath for it as it might take a while.

 

And as for the scroll and different tab options well, it's a ton of other work for all of that to taken in consideration.

Link to comment
Share on other sites

Sorry about the delayed response - I got a chance to look at this and I think I see why you were getting that "maximum call stack size exceeded" error in Safari...

 

You had an onUpdate that was calling a function that moved the playhead of that very same timeline (the one with the onUpdate), thus triggering an onUpdate to be called (since you just moved the playhead). That'd result in a neverending loop (onUpdate is called which updates the playhead which calls the onUpdate...and so on). 

 

I'm actually a bit more confused about why the other browsers didn't choke :)

 

The solution would be to simply suppressEvents in that function call by adding one parameter: 
 

//OLD: 
_tl.time(vid.currentTime);

//NEW: 
_tl.time(vid.currentTime, true);

 

Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

Yeah, makes sense yet, at the same time, I'm also confused why it didn't trigger on the other one. 

 

In any case, I've changed the code a bit and it's a lot more efficient now. 

 

It should be fine for now. 

 

Thanks boss!

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

To detect if your element, video or ad is in the viewport  (or above the fold) you can take advantage of the HTML5 Intersection Observer API. Better performance then using getBoundClientRect() which causes too much re-layout triggers. But it is not available in IE11 yet, but is for all other modern browsers (chrome, safari, opera, and firefox) including MS Edge.

 

Using with ads :

Resources:

 

Also here is an example of using GSAP with the HTML5 Page Visibility API:
 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

:)

  • Like 3
Link to comment
Share on other sites

  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...