如何为每个项目播放视频

Question

我有一个 multiplem 项目列表 (.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>

Answer 1

使用上下文信息，也就是 $(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();
});

Answer 2

以下代码应该对您有所帮助：

       $(".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();
          
        });

我尝试从点击的目标中找到正确的元素。

如何为每个项目播放视频

how to play a video for each item

html

javascript

jquery

video.js