Youtube iFrame（使用JavaScript API）首次加載，但不是第二次加載。爲什麼？

Question

我正在使用以下代碼的iFrame Youtube API。我使用Ajax將此視圖渲染並將其附加到頁面內的div.yt播放器中。它在我第一次調用視圖時有效，但在關閉視頻（清空div.yt-player）並點擊另一個調用我的視圖的鏈接後，視頻根本不會加載（空白）。我一直在掙扎，仍然不明白爲什麼會發生，特別是它第一次運作。任何形式的幫助將不勝感激..謝謝。

PS：html和javascript都由視圖呈現。

Html 
<div id="player"></div> 

Javascript: 
var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '486', 
     width: '864', 
     videoId: '#{@media['youtube_url']}', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     }, 
     playerVars: { 
     'showinfo': 0, 
     'iv_load_policy': 3, 
     'color': 'white', 
     'fs': 1, 
     'autoplay': 1, 
     'vq': 'hd720' 
     } 
    }); 
    } 

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

    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
    } 
    function stopVideo() { 
    player.stopVideo(); 
    } 

Answer 1

我調試了這個問題。 onYouTubeIframeAPIReady（）僅在第一次加載YouTube API時被調用（當用戶刷新頁面並點擊鏈接到視圖的鏈接時），並且因爲我在Ajax中調用了我的視圖，所以它沒有被解僱提出以下幾點。

因此，我通過在包裹它取代的代碼的第一個塊中的條件：

if (typeof youtube_api_init == 'undefined') { 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    } 

和

if (typeof youtube_api_init != 'undefined') { 
    onYouTubeIframeAPIReady(); 
} 

，並在腳本的末尾，我設置爲瀏覽器的youtube_api_init記得YouTube API已經加載：

var youtube_api_init = 1; 

PS：我第一次嘗試，我打電話給我的變種可用yt_api_init而不是youtube_api_init，並且它不起作用，因爲它恰好是YouTube已在其api中使用的名稱...

Answer 2

只需檢查腳本是否已定義。

if(document.getElementById('iframe_api') === null){ 
      var tag = document.createElement('script'); 
      tag.src = "https://www.youtube.com/iframe_api"; 
      tag.id = "iframe_api"; 
      var firstScriptTag = document.getElementsByTagName('script')[0]; 
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
     } 
else 
    runPlayer(); 

function runPlayer(){ 
      var player; 
      player = new YT.Player(element.children()[0], { 
       playerVars: { 
        autoplay: 1, 
        html5: 1, 
        controls: 1, 
        showsearch: 0, 
        showinfo: 0 
       }, 
       height: scope.height, 
       width: scope.width, 
       videoId: scope.videoid, 
       events: { 
        onStateChange: function (event) { 
         if (event.data == YT.PlayerState.ENDED) { 
          scope.$emit('VideoEnded'); 
         } 
        } 
       } 
      }); 
     } 
$window.onYouTubeIframeAPIReady = function() { 
    runPlayer(); 
};