3 Replies Latest reply on Jan 11, 2013 1:55 AM by EnthusiastOfTheMind

    Detect mp4 end

    Double_EDGE_Sword

      I'm working with adaptive layouts and I have them working.  However, I have an intro video that starts up at the beginning of each layout and I don't want it to repeat each time its resized.  I have a few questions:

       

      1.)  How do I detect the end of the mp4?  Here is the code that I'm using:

       

      sym.$("mon900").append(mon);

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

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

       

      2.) Can I add preloaders to the mp4's?  They seem to take awhile to load.

       

      3.) On a different topic, I'm attempting to get my Adobe Edge composition to be centered in the middle of the browser.  I'm currently using this code in completionReady on my stage:

       

      $("#Stage").css("margin","auto")

       

      This doesn't seem to work.  Do I need to center the adaptiveContainer?

       

       

      Thanks!

        • 1. Re: Detect mp4 end
          EnthusiastOfTheMind Level 1

          To control a video/ detect when its finished I use...

           

          //video var

          var vid = $("<video width='854' height='480' controls='controls'>" +

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

             "<source src='video/F2R.ogv' type='video/ogg' />" +

             "This browser is not compatible with HTML 5" +

          "</video>");

           

          // get the div called 'vcontainer' and attach the video;

          sym.$("vcontainer").append(vid);

           

          // additional options for the video object

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

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

           

           

          //function when video ends

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

               //function you want

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

          });

           

           

          //plays the video ie. on a button

          $(vid).get(0).play();

           

           

          //remove items (video) loaded into div (if you want to load another in its place)

          sym.$("vcontainer").children().remove();

           

          PS. I've had issues with mp4 in Chrome, works locally but online they don't always load

          • 2. Re: Detect mp4 end
            Double_EDGE_Sword Level 1

            Follow up question, if I have a button that activates a mp4 file in a container, where do I put the code to check when the clip is finished?  creationComplete?

            • 3. Re: Detect mp4 end
              EnthusiastOfTheMind Level 1

              Usually you'd put the ended variable where ever you've placed the video variable (var vid), i.e. where you've instructed the video to appear:

               

              //video var

              var vid = $("<video width='854' height='480' controls='controls'>" +

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

                 "<source src='video/F2R.ogv' type='video/ogg' />" +

                 "This browser is not compatible with HTML 5" +

              "</video>");

               

              // get the div called 'vcontainer' and attach the video;

              sym.$("vcontainer").append(vid);

               

              // additional options for the video object

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

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

               

               

              //function when video ends

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

                   //function you want

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

              });

               

              This be on Creation complete or on a click function, have a go and see what happens.