光滑的滑块不播放当前的幻灯片视频

如何解决光滑的滑块不播放当前的幻灯片视频

我在光滑的滑块中有 3 个 mp4 视频。我需要移动到下一张幻灯片时的功能。上一张幻灯片中的视频应该暂停。为此，一旦我们进入下一张工作正常的幻灯片，我将暂停所有视频。 现在我需要自动播放当前幻灯片中的视频。

HTML 代码

 <div id="slick" dir="ltr" class="hero-slider">

    <div class="respsonsive-video " > <video autoplay muted loop id="video" class="" controls 
    preload="none" width="100%" height="100%"> <source src="t1.mp4" type="video/mp4" /> </video>  </div> 

    <div class="respsonsive-video " > <video autoplay muted loop id="video" class="" controls 
    preload="none" width="100%" height="100%"> <source src="t1.mp4" type="video/mp4" /> </video>  </div> 

    <div class="respsonsive-video " > <video autoplay muted loop id="video" class="" controls 
    preload="none" width="100%" height="100%"> <source src="t1.mp4" type="video/mp4" /> </video>  </div> 
</div>

JS 这是滑块的代码以及播放和暂停的两个功能。暂停 100% 有效，但在当前幻灯片中再次播放视频无效。

   $(window).load(function () {
       
    
    $('.hero-slider').slick({
        autoplay:true,autoplaySpeed:3500,arrows:true,prevArrow:'<button type="button" class="slick-prev"></button>',nextArrow:'<button type="button" class="slick-next"></button>',//centerMode:true,slidesToShow:1,slidesToScroll: 1,pauSEOnHover: true,arrows: false,dots: true,responsive: [{
            breakpoint: 960,settings: {
                autoplay: false,//autoplaySpeed: 3500,arrows: true,prevArrow: '<button type="button" class="slick-prev"></button>',nextArrow: '<button type="button" class="slick-next"></button>',slidesToShow: 1,}
        }],onInit: function() {
      $('span.css-loader').hide();
      $('.slide').each(function() {
        $(this).css('background-color',$(this).attr('data-bgcolor'));
      });
      $('.next-slide').on('click',function() {
          $('.hero-slider').slickNext();
          
      });
      $('.prev-slide').on('click',function() {
          $('.hero-slider').slickPrev();
        
      });

    
    }
    });
    });
  
// On slide change,pause all videos
$('.hero-slider').on('beforeChange',function(event,slick,currentSlide,nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
});



**// On slide chnage,play a video inside the current slide
$('.hero-slider').on('afterChange',function (event,nextSlide) {
    if ($('.hero-slider.slick-current').find('video').length !== 0) {
        $(".hero-slider .slick-current video")[0].play();
       
  }
    });**


});