jQuery - 将鼠标悬停在父 div 上时播放视频答案

【问题标题】：jQuery - Play video when hover on parent divjQuery - 将鼠标悬停在父 div 上时播放视频
【发布时间】：2014-04-25 04:13:47
【问题描述】：

我正在创建一个视频库，其中包含在悬停时播放短视频的缩略图。我已经能够让它们在将鼠标悬停在视频本身上时播放，但我需要它们在悬停在视频的父 div 上时播放。到目前为止，这是我的尝试：

HTML：

<div class="thumbail">
<video preload="auto" loop>
    <source src="videos/movie.webm" type="video/webm">
    <source src="videos/movie.mp4" type="video/mp4">
    <source src="videos/movie.ogv" type="video/ogg">
</video>
</div>

JavaScript：

$(document).ready(function(){
$(".thumbnail").hover(
function() {
    $(this).children("video").play();
}, function() {
    $(this).children("video").pause();
    $(this).children("video").currentTime = 0;
});
});

无法弄清楚我做错了什么。任何帮助将不胜感激。 :)

【问题讨论】：

标签： jquery video

【解决方案1】：

pay 和 pause 方法属于 dom 元素（视频对象），而不是 jquery 对象所以

$(document).ready(function () {
    $(".thumbnail").hover(function () {
        $(this).children("video")[0].play();
    }, function () {
        var el = $(this).children("video")[0];
        el.pause();
        el.currentTime = 0;
    });
});

$(this).children("video") 返回一个没有支付/暂停方法的 jQuery 对象，因此您的代码应该会出错（除非您包含一些添加这些方法的插件）。

您可以使用子元素的索引（如$(this).children("video")[0]）访问底层 dom 元素，然后在该元素上调用这些方法。

【讨论】：

它是否适用于分配了特定视频源的文字控件。

【解决方案2】：

play 不是 jQuery 函数，而是 DOM 元素的函数。因此，您需要在 DOM 元素上调用它。

$(document).ready(function(){
  $(".thumbnail").hover(
    function() {
      $(this).children("video").get(0).play();
    }, function() {
       $(this).children("video").get(0).pause();
        $(this).children("video").get(0).currentTime = 0;
    });
});

注意：get 用于从 jQuery 选择中获取本机 DOM 元素。

【讨论】：

【解决方案3】：

这是一个非常棒的答案，感谢您的解决方案Aron

这是我为稍微增强功能而实现的一些代码，我的解释如下：

    <script type = "text/javascript">

    $(document).ready(function () {
        $("#video").css("display", "none"); //HIDE THE VIDEO INITIALLY
        $(".thumbnail").hover(function () 
                {
                $("#video").css("display", "block"); //SHOW THE VIDEO ON HOVER
                    $(this).children("video")[0].play();
                }, 

        function () {
            var el = $(this).children("video")[0];
            el.pause();
            el.currentTime = 0;
        });
    });
</script>

以下内容在页面加载时隐藏视频：

$("#video01").css("display", "none");

一旦用户将鼠标悬停在视频外壳上，以下内容会淡入：

$("#video01").css("display", "block");

其中 #video 是视频标签的 id，即：

<video id = "video">

我的实现here.

【讨论】：

【解决方案4】：

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Data: https://gfycat.com/cajax/get/VerifiableTerrificHind
 
Source: https://www.youtube.com/watch?v=nZcejtAwxz4

More info on youtube api for thumbnails: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
-->
<div id="videosList">           

<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>
  </div>
  Hover mouse over video. Desktop only [ Obviously! ;) ]
</div>

【讨论】：