Question

当我点击div下的图片videoCircle下的图片时，应播放上一个视频标记中的视频。

<div class="videoWrapper">
    <video class="video">
        <source src="videos/vidtut1.mp4"  type="video/mp4" />
    </video>
    <div class="videoCircle">
        <img src="img/circle-play.png" />
    </div>
</div>

我尝试了以下内容：

$(".videoCircle img").click(function(){
    $(this).prev().prev().paused ?$(this).prev().prev().play() : $(this).prev().prev().pause();
});

但它给了我一个错误：

Uncaught TypeError：$（...）。prev（...）。prev（...）。pause不是函数

Answer 1

您可以使用route_predicate获取公共父级，然后使用closest('.videoWrapper') find()来玩。试试这个：

video

请注意，您需要在本机$(".videoCircle img").click(function() { var video = $(this).closest('.videoWrapper').find('video')[0]; video.paused ? video.play() : video.pause(); });元素上调用HTML5视频方法（本例中为paused，play和pause），而不是包含的jQuery对象它，因此选择器之后的video。

Answer 2

你可以达到那样的目标

$(".videoCircle img").click(function(){
   var video =  $(this).parent().parent().find($(".video")).get(0);
   console.log(video.paused);
});

js fiddle example

Answer 3

尝试以上操作。

<强>的js

$(function(){
$(".videoCircle img").click(function(){
   var videoelement= $(this).parent().parent().find(".video").get(0);
     videoelement.play();
});
});

Js Fiddle Demo

如何通过单击图像从父div播放视频（使用jquery）

3 个答案: