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

时间:2015-05-15 09:30:37

标签: javascript jquery video autoplay

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

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

在鼠标悬停时,我想让视频进入自动播放/恢复,在鼠标输出时,视频要暂停。

我如何使用JQuery做到这一点?我在JQuery网站上搜索了很多,但我找不到任何东西给我。我试过的代码不起作用。

cSlider: stop autoplay on mouseover 要么 autoplay video in sliderJQuery autoplay video on click show

感谢您的帮助。

2 个答案:

答案 0 :(得分:7)

简单的解决方法:

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

Check jsFiddle

答案 1 :(得分:4)

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