Autoplay / Pause when mouseover mouseout 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>

On mouseover I want the video to go on autoplay/resume, and on mouseout, the video to pause.

How I can do that with JQuery? I searched a lot on the JQuery website but I didn't find anything for me. The code I tried didn't work.

cSlider: stop autoplay on mouseover or autoplay video in slider or JQuery autoplay video on click show

Thanks for the help.

Answer 1

An easy workaround:

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

Check jsFiddle