Highlighted

How to restart video from current paused time?

Participant ,
Jul 13, 2019

Copy link to clipboard

Copied

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;

}

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;

}

Views

343

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

How to restart video from current paused time?

Participant ,
Jul 13, 2019

Copy link to clipboard

Copied

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;

}

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;

}

Views

344

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
Jul 13, 2019 0
Adobe Community Professional ,
Jul 14, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
Jul 14, 2019 0
Participant ,
Jul 14, 2019

Copy link to clipboard

Copied

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?

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
Reply
Loading...
Jul 14, 2019 0
Adobe Community Professional ,
Jul 14, 2019

Copy link to clipboard

Copied

have your stop button call fl_MouseClickHandler_3

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
Reply
Loading...
Jul 14, 2019 0
Participant ,
Jul 14, 2019

Copy link to clipboard

Copied

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;

}

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
Reply
Loading...
Jul 14, 2019 0
Adobe Community Professional ,
Jul 15, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 15, 2019 0
Participant ,
Jul 17, 2019

Copy link to clipboard

Copied

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

}

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
Reply
Loading...
Jul 17, 2019 0
Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
Jul 19, 2019 0
Adobe Community Professional ,
Jul 19, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 19, 2019 0
Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
Jul 19, 2019 0
Adobe Community Professional ,
Jul 19, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 19, 2019 0
Participant ,
Jul 21, 2019

Copy link to clipboard

Copied

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;

}

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
Reply
Loading...
Jul 21, 2019 0
kglad LATEST
Adobe Community Professional ,
Jul 22, 2019

Copy link to clipboard

Copied

if it works, leave it.

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
Reply
Loading...
Jul 22, 2019 0