Question

我的Slick Slider中包含了一个视频。根据Slick文档，您需要在文档准备好时初始化滑块，但是，我无法在同一document.ready语句中添加Google Youtube Iframe Player API。由于这两个是分开的，我的控制台警告我无法找到滑块（变量设置为光滑滑块）。下面是我的代码示例。我的目标是在启动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

使用Google IFrame Player API开始播放YouTube视频时，如何停止Slick Slider动画？

0 个答案: