YT.Player有空值

Question

几个月前，我发布了一个关于this的问题，我的问题被解决了。几天前，有报道说这个问题又发生了，我不知道为什么。

我正在尝试创建一个YT.Player对象，但是失败了。当我console.log() YT.Player对象时，我看不到相关的预期函数，比如cuePlaylist()或getDuration()。通过调试，我成功地提取了Youtube视频ID (我有console.log)，并在创建YT.Player对象时将其作为参数传递。我不明白为什么YT.Player在传递一个有效的YouTube ID时会报告一个空视频，此外，我还确保了我的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>    

​

​

Answer 1

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

( A)确保您的iframes在定义函数的脚本之前出现在页面上。

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

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

如果您已经完成了所有这些工作，但它仍然不起作用，那么另一件要尝试的事情是使用jQuery的$.document.ready()函数并在其中加载iframe库，在尝试从iframes中提取src属性之前，确保DOM是完整的。

希望这将引导您朝着正确的方向；如果这些建议都没有帮助，也许您可以张贴您的整个页面和脚本，并允许我们进行更彻底的检查？