2 Replies Latest reply on Jul 24, 2015 10:35 AM by redeluv

    Pause video in another symbol

    eg4190 Level 1

      So this is driving me a little nuts.  I purchased an Edge Animate template that has a dial that swipes between different slides (EdgeDial - A Responsive UI Dial And Image Slider - Edge Animate Templates | CodeCanyon).  This is for an iPad DPS app.  I've included videos on each of the slides.

       

      I have it all working fine, where the user taps a button at each slide and the video plays.  But if the user flips to the next slide while a video is in progress, the video just keeps playing in the background.  What I want to happen is, whenever the user drags to the next slide in the dial, any current videos will stop. 

       

      So from the main stage, under the function called when the user drags, I've inserted the following line:

       

      sym.getSymbol("ImageSymbol1").$("Video_Name")[0].stop();

       

      But this just seems to be breaking it.  I can find lots of documentation regarding how to start/stop nested symbols, but I can't find anything about controlling video that's contained in a nested symbol.  Any help would be greatly appreciated.

        • 1. Re: Pause video in another symbol
          eg4190 Level 1

          So after extensive testing, it seems that there's something very wrong with the way the iPad is handling the HTML files output by Edge Animate.  When I preview in a browser, I'm having no problem starting, pausing, or resuming videos that are nested in another symbol using the above syntax.

           

          But when I load the exact same HTML file into a web overlay in InDesign and load the project up on my iPad using Adobe Content Viewer, the iPad seems to ignore any commands that affect videos in another symbol.

           

          Any ideas?

          • 2. Re: Pause video in another symbol
            redeluv

            Not sure if this is going to help you or not, this is how we handle videos in edge.

             

            load/attach video (inside nested symbol) to a div I created (using rectangle tool) named vid_p-

             

            var myVid = $("<video width='640' height='480' controls='controls'>" +

               "<source src='videos/yourvideo.mp4' type='video/mp4' />" +

            "</video>");

             

            sym.$("vid_p").append(myVid);

            myVid.attr('autoplay','autoplay');

            myVid.attr('preload','auto');

             

            $(myVid).bind("ended", function () {

                sym.play("yourlabel");   

            });

             

            clear video from div (not nested) when video is finished or navigated away from-

             

            sym.$("vid_p").html ("");

             

            clear video from div inside nested symbol (from stage)-

             

            sym.getSymbol("yoursymbol").$("vid_p").html ("");

             

            Hope it helps!

            -Mitch