带有自动播放视频的 Cycle2 滑块

如何解决带有自动播放视频的 Cycle2 滑块

我希望创建一个包含视频和图片的滑块。我使用 Cycle2 作为基本代码。到目前为止，我已经能够使用此处提供的代码来获得包含图像和视频的基本滑块：https://www.minddevelopmentanddesign.com/blog/create-a-responsive-youtube-video-slider/

这是上面链接中找到的最终结果的codepen： https://codepen.io/AndrewGehman/pen/WZJVba

我的问题是，有没有什么办法可以在到达视频幻灯片时自动播放视频？我猜您必须结合使用此处找到的 Cycle2 API：https://jquery.malsup.com/cycle2/api/ 和此处找到的 YouTube API：https://developers.google.com/youtube/iframe_api_reference

我对这些东西完全是个菜鸟，只是浏览 API 信息让我不知所措。有什么想法吗？

HTML

<div class="page-wrapper">
  <div id="slider" class="cycle-slideshow" data-cycle-timeout="6000" data-cycle-fx="scrollHorz" data-cycle-slides=">.slide">
    <!-- slide -->
    <div class="slide">
      <img src="http://via.placeholder.com/1600x650" width="600" height="650" class="slide-image" alt="">
    </div>
    <!-- slide -->

    <div class="slide">
        <div class="video-wrap">
          <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Lscb4SL58X4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <!-- slide -->

  </div>
  <!-- slider -->

</div>
<!-- page-wrapper -->

CSS

.page-wrapper {
  max-width: 1600px;
  margin: 0 auto;
}

#slider {
  width: 100%;
  margin: 0;
  border: 0;
}
#slider .slide {
  width: 100%;
  display: none;
  position: relative;
}
#slider .slide:first-child {
  display: block;
}
#slider .slide img {
  width: 100%;
}

.video-wrap {
  position: relative;
  padding-bottom: 40.625%;
  height: 0;
  overflow: hidden;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

var player
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player',{
      events: {
        'onStateChange': onPlayerStateChange,}
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      $('#slider').cycle('pause');
    }
    if (event.data == YT.PlayerState.ENDED){
      $('#slider').cycle('resume');
    }
  }
  function stopVideo() {
    player.stopVideo();
  }