重新初始化youtube iframe api

我正在用ajax添加我的YouTube iframe（模態/燈箱圖層）。一次一個。由於我正在這樣做（並且無法更改），因此我無法在文檔準備好的情況下運行YouTube API。腳本需要追加並在iframe存在時運行，以查找iframe的ID。重新初始化youtube iframe api

這一切工作正常與第一個iframe。當用ajax獲取iframe時，我還附加了javascript。

但是：當我關閉該模式層（我關閉它，我不刪除它 - 出於性能的原因），並用一個新視頻打開另一個層，我想再次運行youtube腳本。現在，添加第二個YouTube的API腳本時不起作用。

注意：當我關閉模式時，我用api暫停視頻。這隻適用於第一個iframe。

我應該怎麼辦？有沒有一個函數可以重新初始化api？

感謝試圖幫助tsturzl，但不工作。

我打開一個模式並用ajax加載內容（包含iframe和其他元素）。然後我運行youtube API並將ID設置爲iframes ID。

當我關閉模式我運行player.pauseVideo（）;並暫停視頻。該模式現在已隱藏（未刪除，視頻暫停），並且iframe仍在html中，並且youtube api的ID已「保存」。

現在我想打開另一個youtube iframe的另一個模式（這也是一個加載ajax）。我再次運行API並嘗試保存該ID，因此當我關閉（隱藏）新視頻暫停的模式時，它不起作用。

任何想法如何做到這一點？

注意：在這些模式中，視頻顯示在一個預覽div中，用戶可以隱藏/顯示iframe。當他們隱藏它時，視頻應該暫停。當iframe被隱藏時，預覽div中會顯示一個圖像。

來源

2012-09-27 mrbackman

作爲一種解決方法，您可以將整個YouTube內容放在iframe中：http://stackoverflow.com/a/19254648/1335996 –

似乎沒有，但是您可以自己重新初始化它。由於您沒有提供任何代碼，因此我將參考文檔上的代碼here

要初始化您創建「var player;」這是您在其中使用函數「onYouTubeIframeAPIReady（）」創建實例的變量。也許你每次創建模態時都不會重新創建iframe。

它可能是你在做模態框的方式是通過將內容存儲在一個字符串中的JavaScript。所以每當你關閉它時，div元素都消失了，所以youtube API可能會因爲你初始化的元素的缺失而出錯。

我的猜測是，應該在每次打開或關閉模式時創建並移除iframe（即「player」對象）。

不幸的是，我不能確定，我沒有代碼片段的基礎。你提供的信息很少。

所以我會到是這樣的：

 


     var isReady=0; 
     var player; 
     function onYouTubeIframeAPIReady() { 
     isReady=1; 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
     function onModalOpen(){ 
     if(isReady==1){ 
      player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'u1zgFlCw8Aw', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
      }); 
     } 
     } 
     function onModalClose(){ 
     player=null; 
     }

當然，你需要爲每個iframe的一個「玩家」的對象。您還需要爲每個玩家對象調用onModalOpen/Close，您可以將其作爲參數傳遞給事件處理函數。

來源

2012-09-27 14:45:01 tsturzl

重新初始化youtube iframe api

回答

相關問題