0

I have a HTML5 video tag and a SVG animation. What I want to achieve - When the video is playing i want the animation moving with the same speed as the video. The animation looks like this 

<animateTransform id='pathAnimation' xlink:href="#chartPath" 
                    attributeName="transform"
                    attributeType="XML"
                    type="translate"
                    from=""
                    to="" 
                    dur="1s" begin="indefinate" fill="freeze" />

So every second I change the from and to parameters. The result is really close for what I want to achieve but sometimes (once in couple of seconds) there is like tiny freeze/blink that I think come from the thing that I don't know how exactly to increment the from and to.

So how to make it work smooth with the video ?

Thank you in advance

Bankin
  • 777
  • 1
  • 16
  • 31
  • To which browser are you referring? Chrome seems to have several issues with SVGs. First of all, the end state of the animation seems to sometimes show up in the beginning. Next, it used to have a different timer for SVG drawing, then for the rest. – David Sep 26 '13 at 09:45
  • I would suggest to check for play status periodically and update the position of SVG with JS. – Passerby Sep 26 '13 at 09:58
  • @David - I'm referring Chrome. I know about some of its issues. If this thing for the timer is like you said it .. bad for me :( – Bankin Sep 26 '13 at 10:14
  • @Passerby - The idea is with what values should I move the SVG .. I'm checking but when it's playing I don't know the exact values to use so they can move together. – Bankin Sep 26 '13 at 10:15
  • @Bankin You can find something useful here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement – Passerby Sep 26 '13 at 10:21

0 Answers0