Highlighted

Controlling Video Component FFW/RWD

New Here ,
Jan 20, 2020

Copy link to clipboard

Copied

Hello. I managed to create buttons to play/pause a video inserted as a component in an HTML5 canvas (with code snippets). I also want to add 'fast forward'/'rewind' buttons (goto current frame +/- x - or current time +/-x seconds), but I don't understand how this works. This is probably a very simple question - but as a beginner, I actually don't even know how to properly ask for what I am looking for 😕

Any hint is higly appreciated. 

 

 

 

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

If you've created your own play/pause buttons, then you should already know the basics of getting the reference to the video element and calling methods on it. To skip around in a video, just read and set the currentTime property of the element. Something like (untested)...

// forward
var newTime = myVideoElement.currentTime + 10;
var maxTime = myVideoElement.duration;
if (newTime > maxTime) {
	newTime = maxTime;
}
myVideoElement.currentTime = newTime;

// reverse
var newTime = myVideoElement.currentTime - 10;
if (newTime < 0) {
	newTime = 0;
}
myVideoElement.currentTime = newTime;

Or more succinctly, using ternaries...

// forward
var newTime = myVideoElement.currentTime + 10;
var maxTime = myVideoElement.duration;
myVideoElement.currentTime = newTime < maxTime ? newTime : maxTime;

// reverse
var newTime = myVideoElement.currentTime - 10;
myVideoElement.currentTime = newTime > 0 ? newTime : 0;

Or most succinctly of all...

// forward
myVideoElement.currentTime = Math.min(myVideoElement.currentTime + 10, myVideoElement.duration);

// reverse
myVideoElement.currentTime = Math.max(myVideoElement.currentTime - 10, 0);

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

TOPICS
Code, How to

Views

142

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

Controlling Video Component FFW/RWD

New Here ,
Jan 20, 2020

Copy link to clipboard

Copied

Hello. I managed to create buttons to play/pause a video inserted as a component in an HTML5 canvas (with code snippets). I also want to add 'fast forward'/'rewind' buttons (goto current frame +/- x - or current time +/-x seconds), but I don't understand how this works. This is probably a very simple question - but as a beginner, I actually don't even know how to properly ask for what I am looking for 😕

Any hint is higly appreciated. 

 

 

 

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

If you've created your own play/pause buttons, then you should already know the basics of getting the reference to the video element and calling methods on it. To skip around in a video, just read and set the currentTime property of the element. Something like (untested)...

// forward
var newTime = myVideoElement.currentTime + 10;
var maxTime = myVideoElement.duration;
if (newTime > maxTime) {
	newTime = maxTime;
}
myVideoElement.currentTime = newTime;

// reverse
var newTime = myVideoElement.currentTime - 10;
if (newTime < 0) {
	newTime = 0;
}
myVideoElement.currentTime = newTime;

Or more succinctly, using ternaries...

// forward
var newTime = myVideoElement.currentTime + 10;
var maxTime = myVideoElement.duration;
myVideoElement.currentTime = newTime < maxTime ? newTime : maxTime;

// reverse
var newTime = myVideoElement.currentTime - 10;
myVideoElement.currentTime = newTime > 0 ? newTime : 0;

Or most succinctly of all...

// forward
myVideoElement.currentTime = Math.min(myVideoElement.currentTime + 10, myVideoElement.duration);

// reverse
myVideoElement.currentTime = Math.max(myVideoElement.currentTime - 10, 0);

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

TOPICS
Code, How to

Views

143

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
Jan 20, 2020 0
Adobe Community Professional ,
Jan 21, 2020

Copy link to clipboard

Copied

Hi.

 

The component that ships with Animate already has buttons to play and pause videos.

 

But with you want extra controls, maybe you should consider using a library that has such features. I searched on the web and I found this one: https://videojs.com/. I never used it but it seems to be very good.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 21, 2020 1
Adobe Community Professional ,
Jan 21, 2020

Copy link to clipboard

Copied

If you've created your own play/pause buttons, then you should already know the basics of getting the reference to the video element and calling methods on it. To skip around in a video, just read and set the currentTime property of the element. Something like (untested)...

// forward
var newTime = myVideoElement.currentTime + 10;
var maxTime = myVideoElement.duration;
if (newTime > maxTime) {
	newTime = maxTime;
}
myVideoElement.currentTime = newTime;

// reverse
var newTime = myVideoElement.currentTime - 10;
if (newTime < 0) {
	newTime = 0;
}
myVideoElement.currentTime = newTime;

Or more succinctly, using ternaries...

// forward
var newTime = myVideoElement.currentTime + 10;
var maxTime = myVideoElement.duration;
myVideoElement.currentTime = newTime < maxTime ? newTime : maxTime;

// reverse
var newTime = myVideoElement.currentTime - 10;
myVideoElement.currentTime = newTime > 0 ? newTime : 0;

Or most succinctly of all...

// forward
myVideoElement.currentTime = Math.min(myVideoElement.currentTime + 10, myVideoElement.duration);

// reverse
myVideoElement.currentTime = Math.max(myVideoElement.currentTime - 10, 0);

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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...
Jan 21, 2020 2
New Here ,
Jan 22, 2020

Copy link to clipboard

Copied

I tried all three versions and they all work. For now, I will use the first one because it's the one I understand 🙂

Thanks a lot!!

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...
Jan 22, 2020 0