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

Question

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

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

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

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

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

感谢您的帮助。

Answer 1

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

Answer 2

一个简单的解决方法：

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

Check jsFiddle

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

Autoplay / Pause when mouseover mouseout JQuery

javascript

video

jquery

autoplay