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

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

本文关键字：一张 幻灯片 视频 youtube Bxslider 自动播放 控制      更新时间：2023-09-26

我试图控制一个iframe内的youtube视频。视频是Bxslider结构。我设置滑块自动启动，其中包含一个iframe视频。

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

我已经尝试过了，但它只在第一次加载时起作用，当滑块回到第一张幻灯片时，视频和滑块本身都不再自动播放/冻结。问题是没有错误信息…

<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

让它工作，看看这个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');
      }
    }
相关文章：