Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

problem to pause a video at second

Community Beginner ,
Oct 22, 2020 Oct 22, 2020

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.

 

426
Translate
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

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

 

Translate
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 Expert ,
Oct 22, 2020 Oct 22, 2020
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();
}
}
Translate
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
Wow, now i try. Thank u!
Translate
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
LEGEND ,
Oct 22, 2020 Oct 22, 2020

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

 

 

Translate
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
LEGEND ,
Oct 22, 2020 Oct 22, 2020

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

Translate
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

thank u!

Translate
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 Expert ,
Oct 22, 2020 Oct 22, 2020

@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();
}
}
Translate
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
LEGEND ,
Oct 22, 2020 Oct 22, 2020

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

Translate
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 Expert ,
Oct 22, 2020 Oct 22, 2020
LATEST

good point.

Translate
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