Possible to play part of a video on button press with GSAP?

[JimmyK 1 Likes (Newbie)]

Hey everyone. Is there any way to animate a video so that if for an example a button is pressed, it will play 2 seconds of the video, and then pause the video again? And then when another button is pressed, it will play another two seconds of the video? 
 

Any help is appreciated. Thanks! 

[OSUblake 18,491 Likes (Superhero)]

You really don't need gsap for that. I would just use some delayedCalls.

 

See the Pen c0e1bc59e2c7779b291c117906cab8f8 by osublake (@osublake) on CodePen

 

 

[JimmyK 1 Likes (Newbie)]

Hey man, thanks for the reply! I tried out your method, and it works great for what I want to achieve. However, I do have a problem, and it occurs on your codepen example too. 

Sometimes it pauses the video randomly. It especially happens when the whole sequence has been played through and I wanna play it again. Not sure what is causing this, or if there is a fix. 

Once again, thanks for your help, you are a true wiz.

[OSUblake 18,491 Likes (Superhero)]

20 minutes ago, JimmyK said:

Sometimes it pauses the video randomly

 

Then maybe it's buffering. The canplaythrough event is just an estimate. You might need to download the video. Google how to create a BLOB and use that as a video source.

 

But video is super complicated, and well beyond the scope of this forum. Here's a good place to start learning about all the different properties and events available.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement