javascript - mouseover mouseout JQuery 时自动播放/暂停

Question

我有以下问题。这是代码:

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

我希望在鼠标悬停时视频继续自动播放/继续，而在鼠标移开时，视频暂停。

我如何使用 JQuery 做到这一点？我在 JQuery 网站上搜索了很多，但没有找到适合我的东西。我试过的代码没有用。

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

感谢您的帮助。

Answer 1

一个简单的解决方法:

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

Check jsFiddle