Youtube api 玩家有空值

几个月前我发布了一个问题，我的问题得到了解决。几天前，我收到报告说，这个问题再次发生，我不确定为什么

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

cuePlaylist（）

或

getDuration（）

。通过调试，我成功地提取了Youtube视频ID（我有console.log），并在创建YT.Player对象时将其作为参数传递。我不明白为什么在我传递有效的YouTube ID时YT.Player会报告空视频。此外，我已确保我的

iframe

附带了YouTube视频的ID

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 id="eEIWYgA2lbQ" 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="L7oamJtBpdU" 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）；
返回路径.子字符串（开始，结束）；
}
返回“”；
};

---

即使有5秒的延迟，也不能100%保证在执行试图读取其“src”属性的代码之前在DOM中创建iFrame，特别是考虑到您在问题中没有注意到加载iFrame库的位置。如果您使用标记和src属性来执行此操作，那么最近的网络条件可能会导致加载iframe库，并在完全创建DOM之前经过5秒。避免这种情况的最佳方法是：

A） 确保iFrame出现在定义函数的脚本之前的页面上

B） 不要用标记和src属性加载iFrame库，而是这样做（就在定义onYouTubeIframeAPIReady函数之前）：

如果您已经完成了所有这些工作，但仍然无法正常工作，那么另一种尝试是使用jQuery的$.document.ready（）函数并在其中加载iframe库，只是为了在尝试从iframe提取src属性之前绝对确保DOM是完整的

希望这将引导你在正确的方向；如果这些建议都没有帮助，也许你可以发布你的完整页面和脚本，让我们更彻底地看看

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