如何为每个项目播放视频

问题描述

我有一个多个项目（.brand-item）的列表，每个li的内部都有一个不同的视频。

我正在尝试为每个li播放视频，但是使用已有的代码，当我在每个li内单击时，它会打开所有视频的声音，因此它正在播放所有视频

如何重写代码以仅播放每个li的视频？

我的代码，我正在使用video.js：

$(".brand-item-info").click(function() {
  $(function() {
    $('.fullscreen-video video').each(function() {
      var player = videojs($(this)[0]);
      player.currentTime(0);
      player.play();
      player.muted(0);
    });
  });
  $(this).next(".fullscreen-video").fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />

<li class="brand-item">
  <a href="javascript:void(0)" class="brand-item-info"></a>
  <div class="fullscreen-video">
    <video id="my-player<?PHP echo $counter; ?>" class="video-js vjs-default-skin" preload="none" playsinline loop muted data-setup='{ "controls": true,"autoplay": false,"fill": true,"preload": "auto" }'> 
        <source type="video/mp4" src="<?PHP the_field("brand_-_project_vimeo_distribution_link") ?>">
      </video>
    <a href="javascript:void(0)" class="icon-close icon-close-video"></a>
  </div>
</li>

解决方法

使用上下文信息（也称为$(this)），以便仅定位单击按钮之后的.fullscreen-video元素：

$('.brand-item-info').click(function(){
    var $fullscreenVideo = $(this).next('.fullscreen-video');
    var video = $fullscreenVideo.find('video')[0];
    var player = videojs(video);

    player.currentTime(0);
    player.play();
    player.muted(0);

    $fullscreenVideo.fadeIn();
});

,

以下代码应为您提供帮助：

       $(".brand-item-info").click(function (e) {

            var fullScreenVideoElement = e.target.nextElementSibling;
            var videoElement = fullScreenVideoElement.querySelector("video");

            var player = videojs(videoElement);
                player.currentTime(0);
                player.play();
                player.muted(0);

            $(fullScreenVideoElement).fadeIn();
          
        });

我尝试从点击的目标中找到合适的元素。