鼠标悬停鼠标输出JQuery时自动播放/暂停

Question

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

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

在鼠标悬停时,我希望视频进入自动播放/恢复,在鼠标输出时,视频要暂停.

我怎么能用JQuery做到这一点？我在JQuery网站上搜索了很多,但我找不到任何东西给我.我试过的代码不起作用.

cSlider:在单击显示时停止滑块或JQuery自动播放视频中的鼠标悬停 或 自动播放视频的自动播放

谢谢您的帮助.

Answer 1

一个简单的解决方法:

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

检查jsFiddle