problem to pause a video at second

Community Beginner ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

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.

 

Views

95

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

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();

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

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();
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

Wow, now i try. Thank u!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

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();
	}
}

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

thank u!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

@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();
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 22, 2020 Oct 22, 2020

Copy link to clipboard

Copied

LATEST

good point.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines