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!