How to restart video from current paused time?

[warpigs666]

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;

}

[kglad]

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

[warpigs666]

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]

have your stop button call fl_MouseClickHandler_3

[warpigs666]

Ok now I'm really confused. I could have sworn that after I hit pause and then hit play again it started from the beginning. I think I was just using a video clip that was too short before, so when I hit play it was starting from a stopped state.

Thank you, this is what I was looking for (and what is the normal function that I hadn't realized)

HOWEVER, now my stop button doesn't work. After I changed the function for the stop button back to 'stop' it has...stopped...working. Here's my code, everything is the same right? Why doesn't the stop button work anymore though..? Anything jump out at you? I want the stop button to stop playback completely and reset the play button so that when clicked it starts at the beginning. Now the stop button doesn't respond. Did I mistakenly change something? Could it be a bug?

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;

}

[kglad]

your code looks okay.  did you remove and then re-add your stopBtn to the stage?

if so, that's the problem.  make sure it's instance name is assigned in the properties panel.

if that doesn't help, use your browser's console to see if there's some other error.

[warpigs666]

Hi again. So in the other thread you linked me to a file with some code for play/pause functionality. I've pasted my original code below as well as the code you used. Is one better than the other? Why is that, what are the advantages of one over the other? Thanks again for all your help!

MY CODE:

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

function playVideoFUNC()

{

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

}

YOUR CODE (my formatting):

var video1URL = "[videourl]";

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

{

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

},

this, true);

this.playBtn.addEventListener('click',playFUNC.bind(this));

function playFUNC(e)

{

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

}

[warpigs666]

I'm just wondering is this code I'm writing plain Javascript or CreateJS javascript?

[kglad]

it's createjs.

and your code doesn't load a video so there's nothing to play unless there's code elsewhere loading to the video.

[warpigs666]

Thanks. There's other code, I just pasted part of it.

[kglad]

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.

[warpigs666 · Accepted solution]

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

[kglad]

if it works, leave it.