6 Replies Latest reply on Feb 15, 2015 10:04 AM by activstudios

    sync edge timeline animation with html 5 video timeline

    celmatix

      Hi I am trying to have my adobe edge animation sync with the timecode of an html5 video. Sort of similiar to http://www.edgehero.com/tutorials/videotimetrigger, but I want the edge animation to map to the video timeline. So when you scrub video the animation scrubs as well? I already tried to use something like this

       

       

      var video = document.getElementById("Stage_my_video"); // video means the div with the name my_video ( id Stage_my_video )

       

      var curtime = video.currentTime;

       

      sym.play(curtime);

       

       

      But this did not work how I intended. I have feeling there is probably a simple solution.

        • 1. Re: sync edge timeline animation with html 5 video timeline
          DDcreams Level 1

          I don't use edge hero.

           

           

          However it may be just that sym.play() function doesn't take the datatype of  video.currentTime is giving out...

           

          Meaning you would have to format it to be useable by the play(), i don't think play takes "floats" or "doubles" which are "24.42"" "542.42" Etc...

           

          You may have to cast or round the value before using it in .play();

           

          If video.currentTime is given you a whole number or an "integer" already then, it may be something else.

          • 2. Re: sync edge timeline animation with html 5 video timeline
            celmatix Level 1

            I managed to get it somewhat working with your help. I didn't think about looking at how Animate interprets this number for its timeline. I came up with this, although it does play the animation to correspond with the video, the animation is stuttering. This must be because this event is constantly updating the number on where to play the animate timeline. I guess the way around this would be to call this event only once. and then set up a conditional statement where if the video is ever paused or tracked forward to re-grab the time from the video and play animate timeline from this spot. Any suggestions? I'm fairly new to jquery and want the simplest solution.

             

             

             

            function init(){          // the start of function init

             

            var video = document.getElementById("Stage_my_video"); // video means the div with the name my_video ( id Stage_my_video )

             

             

            video.addEventListener("timeupdate", function() { // function updates if video plays

             

             

            var vidTime = parseInt(video.currentTime);

             

             

            var milliTime = vidTime * 1000;

             

             

            sym.play(milliTime);

             

             

            });

            • 3. Re: sync edge timeline animation with html 5 video timeline
              celmatix Level 1

              i forgot to include that in i found the information for how animate interprets its timline here- which is why I converted the timeline number to nearest integer and then into milliseconds. Screen Shot 2013-11-21 at 10.05.48 PM.png

              • 4. Re: sync edge timeline animation with html 5 video timeline
                DDcreams Level 1

                http://www.w3schools.com/jsref/jsref_parseint.asp

                 

                More then likely you are getting a chopped off value rather then a rounded value, which may be causing your "stuttering", even though javascript is very loose and high level I don't think its an calculation delay..

                 

                However it could be... But I would start by refining how you round it first before.

                1 person found this helpful
                • 5. Re: sync edge timeline animation with html 5 video timeline
                  artfake

                  Hi Katherine,

                   

                  did you get the answer, how to sync edge & html5 video?

                   

                  M

                  • 6. Re: sync edge timeline animation with html 5 video timeline
                    activstudios

                    Hi Guys. I am trying to achieve something similar to Katherine, but i want to get the position of an html5 video timeline, and parse this to another videos timeline once a key has been pressed.


                    I have two html5 (mp4) videos on the stage. One is called black the other is called white.

                    I have this code on the stage for keydown toggle so that it hides and mutes one video and shows the other video which is working great. Now i need to be able to sync the two videos once the spacebar is pressed. They don't need to keep sync, they can drift, as you will only see one video at a time, so the synchronisation of the videos timelines only needs to happen on pressing the spacebar.


                    Any advice would be great. Thanks in advance


                    // code to be run when the user presses a key. The variable “e.which” tells you the key code of the key that was pressed, e.g. 32 = spacebar

                    if (e.which == 32) {

                      if (sym.$("black").is(":visible")) {

                      sym.$("black").hide();

                      sym.$("black")[0].muted = true;

                      sym.$("white").show();

                      sym.$("white")[0].muted = false;

                      sym.$("Stage").css("background-color" , "#ffffff");

                      } else {

                      sym.$("black").show();

                      sym.$("black")[0].muted = false;

                      sym.$("white").hide();

                      sym.$("white")[0].muted = true;

                      sym.$("Stage").css("background-color" , "#000000");

                      }

                    }