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>

What I see in the YT.Player object

Answer 1

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

A）确保您的iframe出现在定义功能的脚本之前的页面上。

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库，只是为了绝对做在尝试从iframe中提取src属性之前，请确保DOM已完成。

希望这会引导你朝着正确的方向前进;如果这些建议都没有帮助，也许您可以发布整页和脚本，让我们更全面地看一下？

YT.Player具有空值

1 个答案: