Блог

У меня есть список нескольких элементов ( .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();
          
        });
  

Я пытаюсь найти нужные элементы из выбранной цели.