Jquery YT.Player仅在QA中为空

我正在尝试创建一个YT.Player对象，但失败了。当我对YT.Player对象执行console.log（）操作时，我看不到预期的相关函数，例如

cuePlaylist（）

或

getDuration（）

。代码在我的本地和开发环境中工作，但在我的QA环境中失败。有人知道为什么会这样吗

通过调试，我成功地提取了Youtube视频ID（我有console.log），并在创建YT.Player对象时将其作为参数传递。我不明白为什么在我传递有效的YouTube ID时，YT.Player会报告一个空视频。此外，我还不明白为什么它在我的本地/开发环境中工作，而在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>    

onYouTubeIframeAPIReady=function（）{
createPpdYoutubeObjects（）；
};
函数createPpdYoutubeObjects（）{
var delay=5000；//需要等待Youtube视频加载
setTimeout（函数（）{
//设置播放器跟踪器，并初始化旋转木马
var玩家={}；
$（'iframe.ytplayer'）。每个（函数（）{
players[grabYoutubeIdFromUrl（$（this.attr（'src'））]=新的YT.Player（grabYoutubeIdFromUrl（$（this.attr（'src'））{
活动：{
“onReady”：onReady，
“onStateChange”：onStateChange
}
});
log（'id:'+grabYoutubeIdFromUrl（$（this.attr（'src'）））；
log（players[grabYoutubeIdFromUrl（$（this.attr（'src'）））））；
});
}，延误）；
};
函数grabYoutubeIdFromUrl（路径）{
如果(
路径类型==“字符串”
&&路径长度>0
&&path.indexOf（'embed/'）>-1
&&path.indexOf（'wmode'，path.indexOf（'embed/'））>-1
)
{
var start=path.indexOf（'embed/'）+6；
var end=path.indexOf（'wmode'，start）；
返回路径.子字符串（开始，结束）；
}
返回“”；
};

---

YT.Player构造函数将DOM元素或HTML元素的ID作为其第一个参数，而不仅仅是任何YouTube ID。您传递的字符串既不表示DOM元素，也不表示任何YouTube ID。因此，您看到的结果表明YT Player无法自我初始化，因为在DOM中没有位置可以这样做

解决方案是在iFrame中添加等同于YouTube src ID的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> 

为什么它在本地/开发环境中工作？可能您的iframe代码确实具有正确的ID属性，并且在将代码复制到QA环境时从未正确传输。但这更难调试。：）

另外，我假设您只在这里发布了一段代码，对吗？因为没有定义onReady和onStateChange函数，所以它不会在发布时运行

祝你好运