Youtube Iframe API - 对象 # 没有方法 'q' [www-widgetapi-vflvlw_TO.js:23]

Question

这是封装在一个 AMD 模块 (RequireJS) 中 - 所以要实现 onYouTubeIframeAPIReady() 我必须将它直接附加到窗口对象：这可行。

/* Apologies for using the window object directly.. but blame Google. */
window.isYTReady = false;
window.onYouTubeIframeAPIReady = function(){
    console.log("YouTube API is ready!");
    window.isYTReady = true;
}

然后在图像元素上有一个点击处理程序，它创建一个YT.Player 对象 - 这是代码失败的地方。

        this.$el.click(function(){
            if(! window.isYTReady ){
                console.log("Youtube API failed to load.");
                return false;
            }

            console.log("YouTube API has loaded, now interacting with YouTube API");

            var docHeight   = $('window').height(),
                docWidth    = $('window').width();

            // Take Youtube ID from the 'data-video' attribute
            _self.player = YT.Player('vidPlayer', {
                height:     '400', //docHeight,
                width:      '400', // docWidth,
                videoId:    'eHooBjxmoXQ', // _self.youtube,
                events: {
                    'onReady':          _self.playerReady,
                    'onStateChange':    _self.playerStateChange
                }
            });
        });

以下是提到的其他功能：

        this.playerReady        = function(e){
            console.log("Player is ready");
            _self.modal.fadeIn();
            e.target.playVideo();
        };

        this.playerStateChange  = function(e){
            console.log("State has changed");
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(_self.stopVideo, 6000);
                done = true;
            }
        }

两者都不运行。

现在我已经调整了所有的论点，但仍然没有运气。我什至尝试将playerReady 函数直接附加到窗口对象，以查看是否存在任何范围问题：无！

我知道 API 已正确加载，因为我在控制台中得到了这个：

YouTube API 已准备就绪！ [player.js:6]

event.returnValue 已弃用。请改用标准 event.preventDefault()。 [jquery-1.10.2.min.js:5]

YouTube API 已加载，现在与 YouTube API [player.js:55] 交互

Uncaught TypeError: Object # has no method 'q' [www-widgetapi-vflvlw_TO.js:23]

很自然，因为它在 Youtube 注入的脚本上失败了 - 这一切都被缩小了并且难以精确调试。然而，一点点挖掘表明这是 queston 中的一行：

function db(a,b){for(var c=document.createElement("iframe"),d=b.attributes,e=0,f=d.length;e<f;e++){var m=d[e].value;null!=m&&""!=m&&"null"!=m&&c.setAttribute(d[e].name,m)}c.setAttribute("frameBorder",0);c.setAttribute("allowfullscreen",1);c.setAttribute("title","YouTube "+S(a.b,"title"));(d=S(a.b,"width"))&&c.setAttribute("width",d);(d=S(a.b,"height"))&&c.setAttribute("height",d);var r=a.q();r.enablejsapi=window.postMessage?1:0;window.location.host&&(r.origin=window.location.protocol+"//"+window.location.host);

我可能会尝试找出 a 应该包含的内容 - 这样我就可以进一步排除故障！

但是，在我这样做之前 - 我是否错过了一些令人痛苦的显而易见的事情？或者以前有人见过吗？

Answer 1

不确定你是否还有这个问题，但你需要打电话

new YT.Player(...)

而不是调用

YT.Player(...)