Bxslider 비디오를 전환 한 후 비디오를 잠시 멈춤

Question

이 주제는 이미 여기에서 논의되었지만 Bxslider에서 재생되는 비디오를 멈추지 않고 전체 페이지를 다시로드하는 코드에는 오류가있는 것으로 보입니다.

<ul class="headslider">    
    <li class="youtube-player cf"> 
     <iframe src="https://www.youtube.com/embed/E5ln4uR4TwQ?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
    </li> 
    <li class="youtube-player cf"> 
     <iframe src="https://www.youtube.com/embed/6KzJtBr6Yxg?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
    </li> 
    <li class="youtube-player cf"> 
     <iframe src="https://www.youtube.com/embed/LNEYhwAp7nQ?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
    </li> 
</ul> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.headslider').bxSlider({ 
     mode: 'fade', 
     auto: false, 
     speed: 1150, 
     pause: 5000, 
     pager: false, 
     onSlideBefore: function() { 
      $('.youtube-player').find('iframe').each(function() { 
      this.pause(); 
      }); 
     } 
    }); 
}); 
</script> 

Answer 1

나는 당신이 성취하려고하는 것이 확실하지 않으며 나는 자바 스크립트를 아주 잘 알고있다. 즉, YouTube API 속성을 호출해야합니다. 나는 (당신은 또한 DIV 대신 유튜브에 따라거야 사용할 수 있습니다) 당신의 iframe을에 ID 년대를 추가 Youtube API Reference

이 예에서 :

당신은 API 참조를 볼 수 있습니다. div를 사용하고 Youtube API가 iframe을 생성하도록하는 것이 좋습니다.

Youtube API는로드 한 후에 bxslider를 호출합니다. 기본적으로 첫 번째 동영상 재생이 있고 동영상을 슬라이드 할 때마다 일시 중지 된 다음 현재 동영상 만 재생됩니다.

YT.Player 개체를 참조하여 동영상을 일시 중지/다시 시작할 수도 있습니다.

<ul class="headslider">    
<li class="youtube-player cf"> 
    <iframe id="video1" src="https://www.youtube.com/embed/E5ln4uR4TwQ?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
</li> 
<li class="youtube-player cf"> 
    <iframe id="video2" src="https://www.youtube.com/embed/6KzJtBr6Yxg?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
</li> 
<li class="youtube-player cf"> 
    <iframe id="video3" src="https://www.youtube.com/embed/LNEYhwAp7nQ?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
</li> 
</ul> 

<script> 
var player; 
var player2; 
var player3; 
function onYouTubeIframeAPIReady() { 
     player = new YT.Player('video1', { 
     videoId: 'E5ln4uR4TwQ', 
     events: { 
      onReady: playVideo 
     } 
    }); 
     player2 = new YT.Player('video2', { 
     videoId: '6KzJtBr6Yxg', 
    }); 
     player3 = new YT.Player('video3', { 
     videoId: 'LNEYhwAp7nQ', 
    }); 
    callbxSlider(); 
} 

function playVideo(event) { 
    event.target.playVideo(); 
} 

function callbxSlider() { 
$('.headslider').bxSlider({ 
     mode: 'fade', 
     auto: false, 
     speed: 1150, 
     pause: 5000, 
     pager: false, 
     onSlideBefore: function(element) { 
      newVideo = element["0"].childNodes[1]; // capture current iframe 
      player.pauseVideo(); 
      player2.pauseVideo(); 
      player3.pauseVideo(); 

      switch (newVideo.id) { 
       case "video1": player.playVideo(); 
       break; 
       case "video2": player2.playVideo(); 
       break; 
       case "video3": player3.playVideo(); 
      } 
     } 
    }); 
} 
</script>