Javascript 当YouTube视频开始使用Google IFrame Player API播放时，如何停止平滑滑块动画？

我有一个视频，是包括在我的光滑滑块。根据Slick文档，您需要在文档准备就绪时初始化滑块，但是，我无法在同一document.ready语句中添加Google Youtube Iframe Player API。由于这两者是分开的，我的控制台警告我无法找到滑块（变量设置为slick slider）。下面是我的代码示例。我的目标是在启动YouTube视频时关闭Slick Slider动画，并在YouTube视频停止时打开动画。在第一次视频播放时，滑块动画不会结束并旋转到下一个幻灯片。如何使滑块在播放视频时停止动画，但在停止视频时开始

=======JavaScript=====

$(document).ready(function(){
 var slider =  $('.mainSlider').slick({
    slidesToShow: 1,
    autoplay: false,
    autoplaySpeed: 5000
  }); 
 slider.slickPlay();  

  $('.mainSlider').on('beforeChange', function(){
    line.set(0);
    line.animate(1.0); 
  });

 });

/* youtube video in slider */
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
    height: '400',
    width: '100%',
    videoId: 'nisAy26sItM',
    events: {
      'onStateChange':onPlayerStateChange
    }
  });
}
  //when the video starts to play move the introduction content down
    var done = false;
    function onPlayerStateChange(event) {
      if ( event.data == 1)
      {
       //move the introduction content down 
       $('#introContent').animate({top: '0px' }, 500 );
       $('#services').animate({'margin-top': '0px'}, 500); 
       // if you play the video then you need to get rid of bxSlider autoplay
     console.log('pause');
      slider.slickPause();
      }
      if ( event.data == -1 || event.data == 2)
      {
        $('#introContent').animate({top:'-165px'}, 500);
         $('#services').animate({'margin-top': '-100px'}, 500); 
         line.stop();
           $('.mainSlider').slick('slickPlay'); 
      }
      if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
      }
    }
    function stopVideo() {
      player.stopVideo();
    }
  //when the video stops move the introduction content back to were it was

$（文档）.ready（函数（）{
变量滑块=$（'.mainslaider'）.slick({
幻灯片放映：1，
自动播放：错误，
自动播放速度：5000
}); 
slider.slickPlay（）；
$（'.mainSlider'）.on（'beforeChange'，function（）{
行集（0）；
线。动画（1.0）；
});
});
/*滑块中的youtube视频*/
//异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//用and替换“ytplayer”元素
//YouTube播放器的API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
高度：'400'，
宽度：“100%”，
videoId:“nisAy26sItM”，
活动：{
“onStateChange”：onPlayerStateChange
}
});
}
//当视频开始播放时，向下移动介绍内容
var done=false；
函数onPlayerStateChange（事件）{
如果（event.data==1）
{
//将介绍内容下移
$（#introContent'）。动画（{top:'0px'}，500）；
$（#services'）。动画（{'margin-top'：'0px'}，500）；
//如果播放视频，则需要摆脱bxSlider自动播放
console.log（'pause'）；
slider.slickPause（）；
}
如果（event.data==1 | | event.data==2）
{
$（#introContent'）.animate（{top:'-165px'}，500）；
$（#services'）.animate（{'margin-top'：'-100px'}，500）；
line.stop（）；
$（'.mainslaider'）.slick（'slickPlay'）；
}
如果（event.data==YT.PlayerState.PLAYING&&！done）{
设置超时（停止视频，6000）；
完成=正确；
}
}
函数stopVideo（）{
player.stopVideo（）；
}
//当视频停止时，将介绍内容移回原处