jQuery-将鼠标悬停在父div上时播放视频 [英] jQuery - Play video when hover on parent div

问题描述

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

I'm creating a video gallery consisting of thumbnails that play a short video on hover. I've been able to get them to play while hovering over the video itself, but I need them to play when hovering on the video's parent div. Here's my attempt so far:

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:

JavaScript:

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

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

Can't figure out what it is I'm doing wrong. Any help would be greatly appreciated. :)

推荐答案

pay和pause方法属于dom元素(视频对象)，而不属于jquery对象

The method pay and pause belongs to the dom element(video object), not the jquery object so

$(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") returns a jQuery object which does not have the pay/pause methods so your code should through an error(unless you have included some plugins which adds those methods).

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

You can access the underlying dom element by using the index of the child like $(this).children("video")[0] then call those methods on that element.

这篇关于jQuery-将鼠标悬停在父div上时播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！