Question

我正在尝试创建一个YT.Player对象但是失败了。当我在console.log（）中使用YT.Player对象时，我没有看到关联的预期函数，例如cuePlaylist()或getDuration()。该代码适用于我的Local和Dev环境，但在我的QA环境中失败。有谁知道为什么会发生这种情况？

通过我的调试，我成功地提取了Youtube视频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>

my console

Answer 1

YT.Player构造函数将DOM元素或HTML元素的ID作为其第一个参数，而不仅仅是任何YouTube ID。你传递的字符串并不代表任何一个字符串，所以你看到的结果表明YT播放器无法初始化，因为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>

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

另外，我假设你只在这里发布了一段你的代码，对吗？因为它没有像你发布的那样运行，因为没有定义onReady和onStateChange函数。

祝你好运！

YT.Player仅在QA中为空

1 个答案: