2 Replies Latest reply on Oct 29, 2013 10:43 PM by batson3000

    Remove Video Controls and add Replay button on page

    kvanhait3610

      Hello,

       

      I am trying to create a page in Adobe Edge that loads a video without any controls (play, slider bar, volume, full screen) and then displays a replay button after the video finishes which will start it from the beginning.

       

      Currently I am able to load the video file and have it play to the end and stop, but I can't seem to get a replay button working.  I also can't find a way to disable controls on the video so they do not show.

       

      Here is the code I am using to load the video:

       

      _____________________________________________________________________________________

      // insert code to be run when the composition is fully loaded here

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

       

       

      sym.stop();

      // original video play code starts here

      // create a text object called vid;

      var vid = $("<video width='980' height='300' controls='none'>" +

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

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

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

         "This browser is not compatible with HTML 5" +

      "</video>"

      );

       

      sym.$("replay_btn").stop().animate({"size":"absolute", "top":"-265", "left":"7", "opacity":"1"}, 0);

       

      // stage symbol lookup, and append the above vid object to it;

      // in other words, get the div called 'vcontainer' and attach the video control to it;

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

       

      // additional options for the video object

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

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

      vid.attr('controls', 'none');

      // End original code

       

      // this is the insert for the action after the video ends

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

      sym.$("vContainer").stop().animate({"size":"absolute", "left":"0", "opacity":"0"}, 0);

      sym.$("replay_btn").stop().animate({"size":"absolute", "top":"394", "left":"19", "opacity":"1"}, 0);

      });

       

      $("#Stage").on('click','#replay_btn',function(){

      vid.pause();

      vid.currentTime = '0';

      vid.play();

      });

       

      sym.$("vContainer").stop().animate({"size":"absolute", "top":"133", "left":"0", "opacity":"1"}, 0);

       

      vid.removeAttribute("controls");

       

      _____________________________________________________________________________________

       

      As you can see, I tried a few ways of disabling the controls, and I also tried adding the replay function to the button itself, but neither of those worked.  Any advice or information on controlling the video control display and replay function in Adobe Edge would be very helpful.

       

      Thanks!

        • 1. Re: Remove Video Controls and add Replay button on page
          kvanhait3610 Level 1

          In case anyone is interested in the replay button, I was able to find code that worked:

           

          var myVideo = document.getElementById("activeVideo");

          myVideo.currentTime = 0;

          myVideo.play();

           

          This is executed when the replay button is clicked.  Just be sure to set the video in question's ID to "activeVideo".

           

          I am still unable to turn off the controls on the video.  It seems like some of the code I have tried should work, but I haven't had success yet.

           

          I've tried all of the following:

           

          var vid = $("<video width='980' height='300' controls='none'>"

          var vid = $("<video width='980' height='300' controls='0'>"

          var vid = $("<video width='980' height='300' controls=''>"

          vid.attr('controls', 'none');

          vid.attr('controls', '0');

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

           

          But nothing has worked so far.  Any help would be much appreciated.

           

          Thanks!

          1 person found this helpful
          • 2. Re: Remove Video Controls and add Replay button on page
            batson3000 Level 1

            I found that just removing the controls line (just have width and height) removes the controls from the player. My problem is I can't get the .oam file I publish to work in Muse. Any info on that? I simply just want my video to play once on page load and stop.