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

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

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