jQuery AJAX加載和Youtube API iframe

Question

我正在一個網頁上工作。我正在使用jQuery加載（AJAX）功能動態地將新內容加載到內容div中。在每個這些內容divs都有一個圖像。當您點擊該圖片時，Youtube嵌入式視頻（iframe）應該開始播放。一切工作到目前爲止，但有一件事，這是有點奇怪：

每當我開始播放Youtube視頻緩衝開始。如果我現在想要加載一個新的內容到內容div中，同時緩衝jQuery加載函數在緩衝完成後被觸發。所以有時候我會在內容改變之前等待10秒（簡單的HTML內容），因爲視頻是緩衝的。如果我不使用iframe嵌入，但對象嵌入一切正常，但我也想支持移動設備（iOS）。所以只是一個簡單的例子來告訴你：

$(".content").load(NEW_CONTENT_URL, function() { 
    // Some animation to replace the oldcontent with the new one 

    // If a iframe embeded video is buffering, this function doesnt get fired. Only after the buffering has finised. 
}); 

這是jQuery AJAX加載或Youtube iframe嵌入中的已知錯誤。有什麼我可以做的，或者我必須使用對象（SWF）嵌入代碼，使其工作。如果是，請告訴我，如何使用Youtube API來嵌入對象。我無法讓「playVideo（）」在現有對象上工作。每次我收到錯誤： TypeError：'undefined'不是函數（評估'playerArr [「player」]。playVideo（）'）;

但是，這是奇怪的爲好，因爲我使用這個功能的嵌入式主權財富基金

var playerArr = []; 
function onYouTubePlayerReady(playerId) { 
     alert(playerId); 
     playerArr[playerId] = document.getElementById(playerId); 
     playerArr[playerId].playVideo(); 

} 

是的，我也用「？enablejsapi = 1」的視頻網址。警報給我一個「玩家」，這是我的對象的ID。 iframe解決方案會更好。

在此先感謝您的幫助。

Answer 1

我認爲這不是很容易的從谷歌API文檔可以理解，但得到的iframe在我的網站正常運行我必須小心對以下3點：

1 /獲取的iFrame特定的API加載：https://www.youtube.com/iframe_apionYouTubeIframeAPIReady

var player; 
function onYouTubeIframeAPIReady(){ 
player = new YT.Player('player', { 
    height: '390', 
    width: '640', 
    videoId: 'M7lc1UVf-VE', 
    playerVars: {'autoplay':'0','rel':'0','control':'0','fs':'1'}, 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

01：

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

2 /聲明正確回調至極名稱按API是不同

3 /和finnaly一定要從未使用此參數：enablejsapi：1

從我們的jQuery全樣本撐着（醜陋但functionnal）：

$(data.settings.contentData).each(function (index, currentData) { 
    var html = '<li style="position:relative;float: left">'; 
    html += '<div id="player"></div>' 
    html += "<script type='text/javascript'>" 
    html += "var player; " 
    html += "var tag = document.createElement('script');" 
    html += "tag.src = 'https://www.youtube.com/iframe_api';" 
    html += "var firstScriptTag = document.getElementsByTagName('script')[0];" 
    html += "firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);" 

    html += "function onYouTubeIframeAPIReady() { " 
    html += " player = new YT.Player('player', " 
    html += "  {height: '390', width: '640', videoId: '" + $.trim(currentData.images.zoom) + "', " 
    html += "  playerVars: {'autoplay':'0','rel':'0','control':'0','fs':'1'}, " 
    html += "  events: {'onReady': onPlayerReady}}" 
    html += " ); " 
    html += "}; " 
    html += "function onPlayerReady(event) { /* your stuff here */ }</script>"; 
    html += '</li>'; 
    containerListImage.append(html); 
    var containerImage = containerListImage.children().last(); 
    ... 
}