CODEWITHSUNDEEP
javascriptvideohoverplayback
EmGes
EmGes

Reputation: 1

Play video on hover using javascript

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 those posted in similar topics here on stackoverflow but it just doesn't work.

Here's my code for now :

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

<script > 
var figure = $(".video-one").hover( hoverVideo, hideVideo );

function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }
</script>

Thank you !

Upvotes: 0

Views: 2333

Answers (1)

lemek
lemek

Reputation: 798

Well, if this is all you've done than I must ask a trivial question. Have you included jQuery to your project? Because this javaScript code requires jQuery to work :)

I've created working example in pure JavaScript: https://codesandbox.io/s/p3mn5yl89j

This is jQuery example: https://codesandbox.io/s/0m1v552vkv

If you have any questions, feel free to ask.

Upvotes: 1

Related Questions