Автовоспроизведение/пауза при наведении курсора мыши JQuery

У меня следующая проблема. Вот код:

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

При наведении курсора я хочу, чтобы видео запускалось автоматически/возобновлялось, а при наведении курсора видео останавливалось.

Как я могу сделать это с помощью JQuery? Я много искал на веб-сайте JQuery, но ничего для себя не нашел. Код, который я пробовал, не работал.

cSlider: остановить автовоспроизведение при наведении курсора или автоматическое воспроизведение видео в слайдере или Автовоспроизведение видео JQuery по клику

Спасибо за помощь.


javascript jquery video autoplay
person Tai Nguyen    schedule 15.05.2015    source источник
comment
Не могли бы вы опубликовать фактически сгенерированный HTML   -  person Rory McCrossan    schedule 15.05.2015

Ответы (2)


arrow_upward
7
arrow_downward

Простой обходной путь:

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

Проверьте jsFiddle

person kosmos    schedule 15.05.2015

arrow_upward

arrow_downward

person    schedule
comment
Нет необходимости использовать делегированные события, если ваши элементы не загружались динамически ???? - person kosmos; 15.05.2015
comment
но это более общий нет? - person Tai Nguyen; 15.05.2015
comment
Нисколько. Каждый способ для каждого случая. Например, с делегированными событиями вы не можете использовать event.stopPropagation(), потому что событие уже полностью делегировано вплоть до документа. Это может повлиять на производительность, если ваш DOM глубокий. Поэтому вы должны использовать их, когда это необходимо. - person kosmos; 15.05.2015
comment
Добро пожаловать. Пожалуйста, отметьте ответ (свой или мой) как действительный, если он решил вашу проблему ???? - person kosmos; 15.05.2015