Video - Play Pause Hold Play Again

  • Adobe Edge Animate - April 21, 2016

This small piace of code lets you pause a video file after a set period time for a set amount of time, the video will then continue to play automaticy then loop.


Clean Code

var movie = sym.$("myVideo")[0];
movie.play();
sym.setVariable("pauseAt", "2");
var firstPlay = true;

movie.addEventListener("timeupdate", function() {
	var pauseAt = sym.getVariable("pauseAt");
	if (this.currentTime >= pauseAt) {
		this.pause();
		if (firstPlay == true) {
			setTimeout(myTimer, 4000);
		}
		movie.removeEventListener("timeupdate", timeListener, false);
	} else {
		this.play();
	}
}, false);

function myTimer() {
	firstPlay = false;
	sym.setVariable("pauseAt", "1000");
  	movie.play();
}

movie.addEventListener("ended", function(){
	movie.play();
	sym.setVariable("pauseAt", "2");
	firstPlay = true; 
}, false);

 

Commented Code

var movie = sym.$("myVideo")[0];var movie = sym.$("myVideo")[0];//  Simplifies the video string to a local variable
movie.play(); // Plays the video file
sym.setVariable("pauseAt", "2"); // Sets a global variable to 2, this is our pause time, 2 seconds
var hasVideoPaused = false; // Condition variable, has the video pause yet? false = no

movie.addEventListener("timeupdate", function() { // Sets an eventListener to listen to the play time of the video
	var pauseAt = sym.getVariable("pauseAt"); // Gets the initialy set pauseAt variable
	if (this.currentTime >= pauseAt) { // Looks to see if the video has passed the pausedAt Variable - i.e. 2 seconds
		this.pause(); // Puses the video
		if (hasVideoPaused == false) { // checks to see if the video has been paused yet
			setTimeout(myTimer, 4000); // Pause for 4 seconds
		}
		movie.removeEventListener("timeupdate", timeListener, false); // remove the eventlistener
	} else {
		this.play(); // Plays the video
	}
}, false);

function myTimer() { // Plays when the 4 second timer is up
	hasVideoPaused = true; // Specify the the video has previously been paused so the timer does not rerun on the timeupdate eventListener
	sym.setVariable("pauseAt", "1000"); // Resets the video end to something beonynd the actual length of the video 
  	movie.play(); // restart the video again after being paused
}

movie.addEventListener("ended", function(){  // Listen for the end of the video
	movie.play(); // Replays the movie from the start so it loops
	sym.setVariable("pauseAt", "2"); // Resets the variable back to its default state
	hasVideoPaused = false; // Resets the variable back to it's default state
}, false);

 

Download Files

Comments