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

Play multiple videos on page with jQuery each() function

本文关键字：播放 视频 each jQuery 函数 使用      更新时间：2023-09-26

我有一个页面上有多个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/

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

不能有多个具有相同ID的元素。把它们换成class。

将video-container的ID改为class和videocover。

<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;
});

.close ()将在DOM

中遍历祖先时获取第一个匹配项

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

将id更改为类

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

.videocover和.wmp_mep_1

id在一个页面上必须是唯一的，否则你会遇到你的问题。

相关文章：