Jump to content
Search Community

aleh

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by aleh

    Background video sync with timeline in banner

    in Banner Animation

    Posted

    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).

     

     

    Background video sync with timeline in banner

    in Banner Animation

    Posted

    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! ;)

     

     

    Background video sync with timeline in banner

    in Banner Animation

    Posted

    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

     

     

    Background video sync with timeline in banner

    in Banner Animation

    Posted

    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?

    Background video sync with timeline in banner

    in Banner Animation

    Posted

    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 :)

    Background video sync with timeline in banner

    in Banner Animation

    Posted

    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

×
×
  • Create New...