Search code examples
javascriptjqueryvideoautoplay

Autoplay / Pause when mouseover mouseout JQuery

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.

Solution

  • An easy workaround:

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

    Check jsFiddle