Skip to main content
warpigs666
Inspiring
July 14, 2019
Answered

How to restart video from current paused time?

  • July 14, 2019
  • 2 replies
  • 1564 views

Hi. I'm figuring out how to make a play/pause button in html5.

How do I make it start playing again from the same position..?

Here's my current code:

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

function fl_MouseClickHandler()

{

$("#video1")[0].stop();

}

this.playBtn.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

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

this.pauseBtn.visible = true;

}

this.pauseBtn.addEventListener("click", fl_MouseClickHandler_3.bind(this));

function fl_MouseClickHandler_3()

{

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

this.pauseBtn.visible = false;

}

    This topic has been closed for replies.
    Correct answer warpigs666

    i don't see any code below the message 6 code.

    my code in message 6 works.  your code would not work (because there's no video loaded.


    Ok here's my final code. Everything is working!!

    The goal was to load a video in a video component, have start, pause, and stop buttons, and have the play/pause buttons appear to be the same button. Then when the video ends a next button slides into screen and it's a button that changes colors when toggled over and you can click it to advance to the next frame.

    The video is loaded into the component in the component parameters window. Do you see any glaring mistakes or problems? Anything that you'd recommend doing a different way? Thanks for all your help.

    FRAME 1:

    this.stop();

    var timelineVAR = this;

    var nextBtnVAR = this.nextMov;

    this.stopBtn.addEventListener("click", stopVideoFUNC.bind(this));

    function stopVideoFUNC()

    {

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

    $("#video1")[0].currentTime = 0;

    this.pauseBtn.visible = false;

    }

    this.playBtn.addEventListener("click", playVideoFUNC.bind(this));

    function playVideoFUNC()

    {

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

    this.pauseBtn.visible = true;

    }

    this.pauseBtn.addEventListener("click", pauseVideoFUNC.bind(this));

    function pauseVideoFUNC()

    {

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

    this.pauseBtn.visible = false;

    }

    this.nextMov.addEventListener("click", nextFrameFUNC.bind(this));

    function nextFrameFUNC()

    {

    this.gotoAndStop(2);

    }

    this.video1.on("added", function()

    {

    $("#video1")[0].addEventListener('ended', timelineVAR.endedHandler);

    }

    );

    this.endedHandler = function(e)

    {

    timelineVAR.gotoAndStop(1);

    timelineVAR.pauseBtn.visible = false;

    };

    FRAME 2:

    this.backBtn.addEventListener("click", frameBackFUNC.bind(this));

    function frameBackFUNC()

    {

    this.gotoAndStop(0);

    this.pauseBtn.visible = false;

    }

    2 replies

    warpigs666
    Inspiring
    July 14, 2019

    I mean that I want a play button, a stop button, and a pause button. I guess maybe I need a fourth button that resumes playback from the current position? I could make the button but what would be the code to tell it to resume playback from current position?

    kglad
    Community Expert
    Community Expert
    July 14, 2019

    have your stop button call fl_MouseClickHandler_3

    kglad
    Community Expert
    Community Expert
    July 22, 2019

    Ok here's my final code. Everything is working!!

    The goal was to load a video in a video component, have start, pause, and stop buttons, and have the play/pause buttons appear to be the same button. Then when the video ends a next button slides into screen and it's a button that changes colors when toggled over and you can click it to advance to the next frame.

    The video is loaded into the component in the component parameters window. Do you see any glaring mistakes or problems? Anything that you'd recommend doing a different way? Thanks for all your help.

    FRAME 1:

    this.stop();

    var timelineVAR = this;

    var nextBtnVAR = this.nextMov;

    this.stopBtn.addEventListener("click", stopVideoFUNC.bind(this));

    function stopVideoFUNC()

    {

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

    $("#video1")[0].currentTime = 0;

    this.pauseBtn.visible = false;

    }

    this.playBtn.addEventListener("click", playVideoFUNC.bind(this));

    function playVideoFUNC()

    {

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

    this.pauseBtn.visible = true;

    }

    this.pauseBtn.addEventListener("click", pauseVideoFUNC.bind(this));

    function pauseVideoFUNC()

    {

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

    this.pauseBtn.visible = false;

    }

    this.nextMov.addEventListener("click", nextFrameFUNC.bind(this));

    function nextFrameFUNC()

    {

    this.gotoAndStop(2);

    }

    this.video1.on("added", function()

    {

    $("#video1")[0].addEventListener('ended', timelineVAR.endedHandler);

    }

    );

    this.endedHandler = function(e)

    {

    timelineVAR.gotoAndStop(1);

    timelineVAR.pauseBtn.visible = false;

    };

    FRAME 2:

    this.backBtn.addEventListener("click", frameBackFUNC.bind(this));

    function frameBackFUNC()

    {

    this.gotoAndStop(0);

    this.pauseBtn.visible = false;

    }


    if it works, leave it.

    kglad
    Community Expert
    Community Expert
    July 14, 2019

    remove your stop button if that's the problem.  otherwise, explain when you see a problem.