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. 

 

 

 

TOPICS
Code, How to

Views

178

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

1 Correct Answer

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

Likes

Translate

Translate
Jump to answer Jump to answer
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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
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
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
jirkab42169223 AUTHOR LATEST
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
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more