Tự động phát/Tạm dừng khi di chuột qua JQuery

Question

Tôi gặp sự cố sau. Đây là mã:

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

Khi di chuột qua, tôi muốn video tự động phát/tiếp tục và tạm dừng video.

Làm cách nào tôi có thể thực hiện điều đó với JQuery? Tôi đã tìm kiếm rất nhiều trên trang web của JQuery nhưng tôi không tìm thấy bất cứ điều gì cho tôi. Mã tôi đã thử không hoạt động.

cSlider: stop autoplay on mouseover hoặc autoplay video in slider hoặc JQuery autoplay video on click show

Thanks for the help.

Answer 1

Một workaround dễ dàng:

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

Check jsFiddle

Answer 2

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