Using timeline to play and pause video on hover

[EmGes]

I'm trying to set up un html page displaying 2 videos that could each be played by hovering a button placed next to it. I would also like them to pause on mouse out.

I've tried several codes including using javascript and/or jquery but it just doesn't work.

I'm not sure if it's possible at all so here's my html :

 

<div class="video-one">
<video  loop preload="auto" >
<source src="street-copy.mp4" type="video/mp4">
</video>                                    
</div>  

 

Thank you !

[Shaun Gorneau]

Hi @EmGes,

Yes, this is absolutely possible, but this doesn't have anything to do with GSAP. It's pretty straight forward (especially if using jQuery). Here is a CodePen showing a way to do it ...

 

 

See the Pen LqxgqL by sgorneau (@sgorneau) on CodePen

 

Are looking to do anything with GSAP that you have questions about?

 

[EmGes]

Hi !

 

Thank you for your answer, I thought that maybe gsap could help achieve this in a simple way. However in the html in your codepen, a div is not closed in the end :

 

 <div id="hover" class="button">PLAY/PAUSE (hover)</div

 

it still works though. When trying that code I had to close it but nothing moves...

[Shaun Gorneau]

34 minutes ago, EmGes said:

Hi !

 

Thank you for your answer, I thought that maybe gsap could help achieve this in a simple way. However in the html in your codepen, a div is not closed in the end :

 

 <div id="hover" class="button">PLAY/PAUSE (hover)</div

 

it still works though. When trying that code I had to close it but nothing moves...

 

Good catch on the incomplete closing </div> ... that's what I get for typing too fast  

 

play(), pause(), currentTime() are native to JS in the video and audio APIs, so there's not much any framework can/would do to make that easier. I went with jQuery only to make the bindings a bit easier ... but vanilla JS would work just as well.

 

Is there something beyond play/pause that you're hoping GSAP would facilitate?