Controlling Video Component FFW/RWD

[jirkab42169223]

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. 

[JoãoCésar]

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

[ClayUUID · Accepted solution]

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

[jirkab42169223]

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!!