Skip to main content
J
jirkab42169223
Participant
January 20, 2020
Answered

Controlling Video Component FFW/RWD

  • January 20, 2020
  • 2 replies
  • 564 views

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. 

 

 

 

This topic has been closed for replies.
Correct answer ClayUUID

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

2 replies

C
ClayUUIDCorrect answer
Legend
January 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.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

    J
    jirkab42169223Author
    Participant
    January 22, 2020

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

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    January 21, 2020

    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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices