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

时间:2014-02-26 14:07:51

标签: javascript iframe youtube-api requirejs

这包含在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]

     

未捕获的TypeError:对象#没有方法'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应该包含的内容 - 所以我可以进一步排查问题!

然而,在我这样做之前 - 我错过了一些非常明显的东西;或者之前有人见过这个?

1 个答案:

答案 0 :(得分:1)

不确定是否仍有此问题,但您需要致电

new YT.Player(...)

而不是打电话

YT.Player(...)