在 Bxslider 中控制 youtube 视频播放完毕后自动滑动到下一张幻灯片

Question

我正在尝试在 iframe 中控制 YouTube 视频。 Bxslider 结构中的视频。我将滑块设置为自动启动，其中包含一个 iframe 视频。

我想做的是当 "currentSlide" 是视频幻灯片时，自动播放它并转到下一张幻灯片 'after' 视频已播放完毕。所以冻结幻灯片直到视频结束。

我试过了，但它只在第一次加载时起作用，当滑块返回到第一张幻灯片时，视频和滑块本身不再 autoplay/freeze。问题是没有错误信息..

HTML

<ul class="bxslider" id="main-slider">
  <li>
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/zwZkhCP9QRY?rel=0&amp;autohide=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen="" id="fitvid0"></iframe>
  </li>
  <li>
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/ZLls1Wn6070?rel=0&amp;autohide=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen="" id="fitvid1"></iframe>
  </li>
</ul>

JS

// Load YouTube Frame API
(function(){
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api";
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

  var mainslider = $('#main-slider').bxSlider({
    speed: 1000,
    mode: 'fade',
    pager: false,
    auto: true,
    autoControls: true,
    infiniteLoop: true,
    // pause: pause,
    adaptiveHeight: true,
    onSlideBefore: function() {

    },
    onSliderLoad: function() {
      console.log('Slider loaded');
      slideInit();
    },
    onSlideAfter: function() {
      currentPos();
    }
  });

  function slideInit() {
      var currentNum = mainslider.getCurrentSlide();
      console.log('slide:' + currentNum);
      if ($('#main-slider li').eq(currentNum).find('iframe').length > 0) {
        var getFrame = $('#main-slider li').eq(currentNum).find('iframe').attr('id');
        console.log('video id:' + getFrame);
        onYouTubeIframeAPIReady(getFrame);
        console.log('data sended');
      }
    }
    //Get Video frame
  function currentPos() {
    var currentNum = mainslider.getCurrentSlide();
    console.log('slide:' + currentNum);
    if ($('#main-slider li').eq(currentNum).find('iframe').length > 0) {
      var getFrame = $('#main-slider li').eq(currentNum).find('iframe').attr('id');
      console.log('video id:' + getFrame);
      onYouTubeIframeAPIReady(getFrame);
      console.log('data sended');
    }
  }

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


function onPlayerReady(event) {
  event.target.playVideo();
  console.log('player triggered');
}

function onPlayerStateChange(event) {
  console.log('play Status::::::::' + event.data);
  if (event.data == YT.PlayerState.ENDED && !done) {
    var start = document.getElementsByClassName('bx-start');
    start[0].click();
    console.log('slider-started');
  } else if (event.data == YT.PlayerState.PLAYING) {
    var stop = document.getElementsByClassName('bx-stop');
    stop[0].click();
    console.log('slider-stopped');
  } else if (event.data == YT.PlayerState.CUED) {
    event.target.playVideo();
    console.log('come here cued');
  }
}

http://codepen.io/wushan/pen/VvyEGa

Answer 1

成功了，看到这个CodePen

我更改了以下内容：

 function onPlayerStateChange(event) {
  console.log('play Status::::::::' + event.data);
  if (event.data == YT.PlayerState.ENDED && !done) {

/*~~~~~~~~~~~~~~~~~~~~~~~~~~删除~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~

** var start = document.getElementsByClassName('bx-start');

** 开始[0].click();

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~*/

//ADD   bx.stopAuto();
        console.log('slider-started');
      } else if (event.data == YT.PlayerState.PLAYING) {

/*~~~~~~~~~~~~~~~~~~~~~~~~~~删除~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~

** var stop = document.getElementsByClassName('bx-stop');

** 停止[0].click();

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~*/

//ADD   bx.startAuto();
        console.log('slider-stopped');
      } else if (event.data == YT.PlayerState.CUED) {
        event.target.playVideo();
        console.log('come here cued');
      }
    }

在 Bxslider 中控制 youtube 视频播放完毕后自动滑动到下一张幻灯片

Control the youtube video in Bxslider to autoplay and slide to next slide after it finished

javascript

youtube

youtube-api

bxslider