Автовоспроизведение/пауза при наведении курсора мыши 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

Answer 2

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