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

【问题标题】：Autoplay / Pause when mouseover mouseout JQuery鼠标悬停时自动播放/暂停 JQuery
【发布时间】：2015-07-27 04:09:11
【问题描述】：

我有以下问题。代码如下：

<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

感谢您的帮助。

【问题讨论】：

能否请您发布实际生成的 HTML

标签： javascript jquery video autoplay

【解决方案1】：

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

【讨论】：

如果您的元素没有动态加载，则无需使用委托事件?
但它更通用吗？
一点也不。每种方式都适用于每种情况。例如，对于委托事件，您不能使用event.stopPropagation()，因为该事件已经一直委托给文档。如果您的 DOM 很深，这可能会影响性能。所以你应该在必要时使用它们。
不客气。如果解决了您的问题，请将答案（您自己的或我的）标记为有效?

【解决方案2】：

一个简单的解决方法：

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

Check jsFiddle

【讨论】：