Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Remove Video Controls and add Replay button on page

$
0
0

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!


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>