YT.Player Null仅适用于质量检查 [英] YT.Player Null In Only QA

问题描述

我试图创建一个YT.Player对象，但是失败了.当我console.log()YT.Player对象时，看不到预期的相关功能，例如cuePlaylist()或getDuration().该代码可在我的本地和开发环境中运行，但是在我的质量检查环境中失败.有谁知道为什么会这样?

I am trying to create a YT.Player object but is failing. When I console.log() the YT.Player object, I do not see the expected functions associated such as cuePlaylist() or getDuration(). The code works on my Local and Dev environments, but is failing in my QA environment. Does anyone have any idea why this can be happening?

通过调试，我成功提取了YouTube视频ID(我有console.log)，并在创建YT.Player对象时将其作为参数传递.我不明白为什么YT.Player在传递有效的Youutube ID时会报告空视频.此外，令我感到困惑的是，为什么它可以在我的Local/Dev而不是QA环境中使用.

Through my debugging, I am successful in extracting the Youtube Video ID (which I have console.log), and passing that as a parameter when creating the YT.Player object. I do not understand why YT.Player would report a null video when I am passing it a valid Youutube ID. Furthermore, I am puzzled why it works in my Local/Dev but not QA environments.

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>    

推荐答案

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

The YT.Player constructor takes as its first argument either the DOM element or the ID of the HTML element, not just any YouTube ID. You're passing a string that doesn't represent either, and so the results you're seeing is indicative of a YT Player that can't initialize itself because there's no where in the DOM for it to do so.

解决方案是将ID属性添加到与YouTube src ID相同的iFrame中，如下所示:

The solution is to add ID attributes onto your iFrames that are equal to the YouTube src ID, like this:

<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属性，并且在将代码复制到质量检查环境时才从未正确传输过.但这很难调试. :)

Why was it working in local/dev? Possible that your iframe code there did have the proper ID attributes and just never properly transferred when you copied your code to a QA environment. But that's much harder to debug. :)

此外，我假设您只在此处发布了一段代码，对吗?由于未定义onReady和onStateChange函数，因此它不会在您发布时运行.

Also, I assume that you only posted a snippet of your code here, correct? Because it won't run as you posted it, given that the onReady and onStateChange functions aren't defined.

祝你好运！

这篇关于YT.Player Null仅适用于质量检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！