YT.Player只在QA

Question

我想創建一個YT.Player對象，但失敗。當我console.log（）YT.Player對象，我沒有看到相關的預期功能，如cuePlaylist()或getDuration()。該代碼適用於本地和開發環境，但在我的QA環境中失敗。有誰知道爲什麼會發生這種情況？

通過我的調試，我成功地提取了Youtube Video ID（我有console.log），並在創建YT.Player對象時將它作爲參數傳遞。我不明白爲什麼YT.Player會在我傳遞一個有效的Youutube ID時報告一個空視頻。此外，我很困惑爲什麼它能在我的本地/開發環境中工作，而不是在QA環境中工作。

onYouTubeIframeAPIReady = function() { 
    createPpdYoutubeObjects(); 
}; 

function createPpdYoutubeObjects() { 
    var delay = 5000; // need to wait for Youtube videos to load 
    setTimeout(function(){   
     // Sets up player tracker, and init the carousel 
     var players={}; 

     $('iframe.ytplayer').each(function() { 
      players[ grabYoutubeIdFromUrl($(this).attr('src')) ] = new YT.Player(grabYoutubeIdFromUrl($(this).attr('src')), { 
       events: { 
        'onReady': onReady, 
        'onStateChange': onStateChange 
       } 
      }); 

      console.log('id: ' + grabYoutubeIdFromUrl($(this).attr('src')));     
      console.log(players[ grabYoutubeIdFromUrl($(this).attr('src')) ]);     

     }); 
    }, delay); 
}; 

function grabYoutubeIdFromUrl(path) { 
    if (
     typeof path === "string" 
     && path.length > 0 
     && path.indexOf('embed/') > -1 
     && path.indexOf('?wmode', path.indexOf('embed/')) > -1 
    ) 
    { 
     var start = path.indexOf('embed/') + 6; 
     var end = path.indexOf('?wmode', start); 
     return path.substring(start, end); 
    } 
    return ""; 
}; 

<iframe class="ytplayer" type="text/html" width="930" height="524" 
    src="https://www.youtube.com/embed/9VZUcLgtDM4?wmode=opaque&amp;rel=0&amp;enablejsapi=1&amp;iv_load_policy=3" 
    frameborder="0" allowfullscreen=""></iframe> 
<iframe class="ytplayer" type="text/html" width="930" height="524" 
    src="https://www.youtube.com/embed/lF1j8mdmVEI?wmode=opaque&amp;rel=0&amp;enablejsapi=1&amp;iv_load_policy=3" 
    frameborder="0" allowfullscreen=""></iframe>  

Answer 1

的YT.Player構造函數採用作爲第一個參數要麼的DOM元素或HTML元素，不是任何的YouTube ID的ID。您傳遞的字符串不代表任何內容，因此您看到的結果表示YT播放器無法初始化，因爲DOM中沒有位置可以執行此操作。

的解決方案是增加ID屬性到您的iFrame是等於YouTube的SRC ID，像這樣：

<iframe id="9VZUcLgtDM4" class="ytplayer" type="text/html" width="930" height="524" 
    src="https://www.youtube.com/embed/9VZUcLgtDM4?wmode=opaque&amp;rel=0&amp;enablejsapi=1&amp;iv_load_policy=3" 
    frameborder="0" allowfullscreen=""></iframe> 
<iframe id="lF1j8mdmVEI" class="ytplayer" type="text/html" width="930" height="524" 
    src="https://www.youtube.com/embed/lF1j8mdmVEI?wmode=opaque&amp;rel=0&amp;enablejsapi=1&amp;iv_load_policy=3" 
    frameborder="0" allowfullscreen=""></iframe> 

爲什麼它在本地的/ dev的工作？可能您的iframe代碼確實具有正確的ID屬性，並且在您將代碼複製到QA環境時從未正確傳輸。但是這很難調試。 :)

另外，我假設你只在這裏發佈了你的代碼片段，對嗎？由於onReady和onStateChange函數未定義，因此它不會像發佈它一樣運行。

祝你好運！