Question

我的网页上有多个HTML5视频。对于每个视频，都有一个位于视频顶部的“海报”图像。当有人点击海报图片时，图像会通过CSS消失，并播放下方的视频。

我的问题是，当有人点击它时，我只能在页面上播放第一个视频。我希望用户能够点击页面上的任何视频来播放它们。我的猜测是我需要将“each（）”函数合并到jQuery代码中。

这是我当前的jQuery代码：

$('#videocover').click(function() {
  var video = $('#wp_mep_1').get(0);
  video.play();

  $(this).css('visibility', 'hidden');
  return false;
});

下面是一个JSFiddle，页面上有多个视频，但只有第一个点击时才有效。随意玩耍： https://jsfiddle.net/rtkarpeles/ammebd3k/3/

提前感谢您提供的任何和所有帮助！

Answer 1

您不能拥有多个具有相同ID的元素。将他们改为上课。

将视频容器从ID更改为类和视频切换。

<div class="video-container">
  <video>...</video>
  <div class="videocover"></div>
</div>

使用上面的结构，下面的脚本应该可以正常工作。

$('.videocover').click(function () {
    var video = $(this).closest('.video-container').find('video')[0]; 
    video.play();

    $(this).css('visibility', 'hidden');
    return false;
});

.closest() 会在遍历DOM中的祖先时获取第一个匹配

这是一个演示 https://jsfiddle.net/dhirajbodicherla/ammebd3k/5/

Answer 2

将您的ID更改为类。

https://jsfiddle.net/ammebd3k/6/

.videocover和.wmp_mep_1

网页上的ID必须是唯一的，否则您会遇到问题。

使用jQuery each（）函数在页面上播放多个视频

2 个答案: