Auto play / pause on mouse over jQuery

Question

I have the following problem. Here is the code:

<div class="article-content-wrapper> <%= video_tag 'Garden.mp4', :class => "video", :controls => true %> </div> 

When you hover over the mouse, I want the video to continue auto-play / resume, and when outputting the video, pause.

How can I do this using jQuery? I searched a lot on the jQuery website, but I did not find anything for me. The code I tried does not work.

cSlider: stop autostart on mouseover or autoplay video in slider or jQuery autoplay video when showing clicks

Thanks for the help.

Answer 1

Easy workaround:

 $(function(){ $('.video').on('mouseenter', function(){ if( this.paused) this.play(); }).on('mouseleave', function(){ if( !this.paused) this.pause(); }); }); 

Check jsFiddle

Answer 2

 $(document).ready(function() { $(document).on({ mouseenter: function () { this.play(); }, mouseleave: function () { this.pause(); } }, '.video'); });