Skip to main content
A
alexsici
Participant
October 22, 2020
Question

problem to pause a video at second

  • October 22, 2020
  • 4 replies
  • 532 views

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.

 

    This topic has been closed for replies.

    4 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 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();
    }
    }
    C
    ClayUUID
    Legend
    October 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.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 22, 2020

    good point.

    C
    ClayUUID
    Legend
    October 22, 2020

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

      A
      alexsiciAuthor
      Participant
      October 22, 2020

      thank u!

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      October 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();
      }
      }
      A
      alexsiciAuthor
      Participant
      October 22, 2020
      Wow, now i try. Thank u!
      C
      ClayUUID
      Legend
      October 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();
	}
}

       

       

      A
      alexsiciAuthor
      Participant
      October 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();

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices