在Bootstrap Carousel中的Youtube iframe - 在幻燈片上停止視頻

Question

我在頁面上有一堆傳送帶，每個傳送帶都混合了視頻和圖像。當用戶點擊其中一個輪播控件（左側或右側）退出視頻時，我想停止播放Youtube視頻。

我希望能夠檢測用戶何時單擊控件，根據當前正在播放的視頻創建播放器，然後關閉該視頻。在我見過的其他例子中，玩家在onYoutubeIframeAPIReady函數中聲明，但我認爲最好不要爲頁面上的每個視頻動態創建播放器。現在，我得到錯誤

Uncaught TypeError: Object #<T> has no method 'stopVideo' 

當我點擊旋轉木馬控件。但是，如果我輸入

player.stopVideo(); 

在Chrome的JavaScript控制檯中，它工作正常。我究竟做錯了什麼？

<script> 
    var youtubeReady = false; 

    function onYouTubeIframeAPIReady(){ 
    youtubeReady = true; 
    } 

    $('.carousel').on('slide', function(){ 
    if(youtubeReady){ 
     console.log("setting player"); 
     var iframeID = $(this).find('.active').find('iframe').attr("id"); 
     player = new YT.Player(iframeID); 
     player.stopVideo(); 
    } 
    }); 
    </script> 

例旋轉木馬：

<div class="mainPhoto carousel slide 523" id="carousel-523"> 
      <div class="carousel-inner 523"> 
      <div class="item active"> 
      <div class="flex-video"> 
       <a class="fancybox" href="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;enablejsapi=1" rel="gallery 523" data-fancybox-type="iframe"> 
        <iframe src="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;enablejsapi=1" id="1188"> 
        </iframe> 
       </a> 
      </div> 
     </div> 
     <div class="item"> 
      <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/2013-07-05_19.47.55.jpg" rel="gallery 523" data-fancybox-type="image"> 
       <img alt="Preview_2013-07-05_19.47.55" id="1189" src="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/preview_2013-07-05_19.47.55.jpg" width="100%"> 
      </a> 
     </div> 
    </div> 
      <a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;">‹</a> 
      <a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;">›</a> 
     </div> 

Answer 1

我結束了使用callPlayer功能在這裏（這並不需要使用YouTube API的話）：

YouTube iframe API: how do I control a iframe player that's already in the HTML?