problem to pause a video at second

[alexsici]

Hello everybody,

i have a problem: i have a video component 

i imported in a html5 canvas. I managed to control the video trough buttons, but i need to pause a video without the buttons.

I mean, i need the video to play and pause after 3 sec. The instance i gave to the video is "myVideo"

i tried the snipped code of animate, but nothing work. When i play the video trough button, there is no way to stop it at second 2.

Is there out there anyone willing to help me? thank u.

[alexsici]

this is the action i gave to the document:

canvas.style.zIndex = "1";

this.PlayBtn.dyn.text="Play";

this.PlayBtn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

   $("#myVideo")[0].play();

}

this.stop();

[kglad]

function fl_MouseClickHandler(){

   $("#myVideo")[0].play();

createjs.Ticker.addEventListener("tick",tickF);

  }

function tickF(e){

if(createjs.Ticker.getTime()>=3000){  // if you want to pause at second 3.  use 2000 if you want second 2.

createjs.Ticker.removeEventListener("tick",tickF);

 $("#myVideo")[0].pause();

}

}

[alexsici]

Wow, now i try. Thank u!

[ClayUUID]

The above code pauses the video 3 seconds after the page initializes, not 3 seconds into the video. If the user takes more than 3 seconds to click the play button, the video won't even play at all.

To pause a video at a certain number of seconds, you have to monitor the actual time index of the video. This seems to work:

var _pauseTime = 3.0;

this.myPlayButton.addEventListener("click", fl_MouseClickHandler);

function fl_MouseClickHandler(e) {
	var vid = $("#myVideo")[0];
	vid.play();
	vid.addEventListener("timeupdate", vidTime);
}

function vidTime(e) {
	var vid = e.target;
	if (vid.currentTime >= _pauseTime) {
		vid.removeEventListener("timeupdate", vidTime);
		vid.pause();
	}
}

[ClayUUID]

Be aware that on mobile devices videos will not autoplay, so if there are no controls available, mobile users will be stuck.

[alexsici]

thank u!

[kglad]

@ClayUUID you could also check if it's been 3 seconds since the play button was clicked, but you're correct; the code i previously posted doesn't do that.  this does (i believe):

function fl_MouseClickHandler(){

   $("#myVideo")[0].play();

this.startTime = createjs.Ticker.getTime();

createjs.Ticker.addEventListener("tick",tickF);

  }

function tickF(e){

if(createjs.Ticker.getTime()-this.startTime>=3000){  // if you want to pause at second 3.  use 2000 if you want second 2.

createjs.Ticker.removeEventListener("tick",tickF);

 $("#myVideo")[0].pause();

}

}

[ClayUUID]

I'd still not recommend this approach, since if anything interrupts playback, e.g. buffering, the video won't pause at the correct point.

[kglad]

good point.