javascript - 使用 jQuery each() 函数在页面上播放多个视频

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/