播放自动播放 vimeo 视频时暂停 Slick Slider 不起作用

问题描述

我使用 iframe vimeo 视频和图像创建了 Slick Slide 横幅。我尝试在播放自动播放视频时暂停当前滑块.. 我尝试使用“beforeChange”事件进行当前滑块暂停,仅播放当前滑块视频而保持滑块视频必须暂停.. 我不明白为什么不工作/我缺少什么。

$(function() {
    let $slideshow = $('.slick_slider');
    
    $slideshow.slick({
        initialSlide: 0,autoplay: true,autoplaySpeed: ImagePauses[0],dots: false,arrows: false,fade: true
    });

    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    
    $slideshow.on('beforeChange',function(event,slick,currentSlide){

        // pause old video (better performance)
       if(!currentSlide) {
           player.pause();
           currentSlide.pause();
       } else {
           currentSlide.play();
           player.pause();
           
       }

    });

});
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">

  <div class="vimeo-wrapper">
    <iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565964510" allow=autoplay  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

  <div>
    <img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
  </div>

  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

  <div>
    <img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
  </div>

</div>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)