Question

我正在创建一个视频库，其中包含缩略图，可以在悬停时播放短视频。我已经能够让它们在视频本身上空播放时播放，但我需要它们在视频的父级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;
});
});

无法弄清楚它是什么我做错了。任何帮助将不胜感激。：）

Answer 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")返回一个没有pay / pause方法的jQuery对象，所以你的代码应该通过一个错误（除非你包含了一些添加这些方法的插件）。

您可以使用像$(this).children("video")[0]之类的子索引来访问基础dom元素，然后在该元素上调用这些方法。

Answer 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元素。

Answer 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.

Answer 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>

jQuery - 悬停在父div上时播放视频

4 个答案: