Youtube iframe:onYouTubePlayerAPIReady()未调用

时间:2013-01-13 13:09:58

标签: javascript iframe youtube youtube-api

我有一个带有iframe的页面,它加载了一个youtube视频(iframe的src在运行时被修改)。 我基于Rob W的代码提供了关于该主题的不同答案

<iframe id="browser" class="browser" scrolling="no" name="navigation"  
src="http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1" application="youtube" style="display:  
inline;"></iframe>

然后,当加载iframe时,执行以下代码:

$('.browser').load(function() {
dispose_ytplayer();
});

被调用函数dispose_ytplayer()是:

function dispose_ytplayer() {
    (function(){
    var s = document.createElement("script");
    s.src = "http://www.youtube.com/player_api";
    var before = document.getElementsByTagName("script")[0];
    before.parentNode.insertBefore(s, before);
     })();

    alert('called yt_dispose');

    var ytIframeplayer;

    function onYouTubePlayerAPIReady() {
        alert('called onYouTubePlayerAPIReady');
        ytIframeplayer = new YT.Player('browser', {
             events: {
                "onStateChange": stopCycle
             }
        });
    }
}

但从未调用第二个警报(“调用onYouTubePlayerAPIReady”),我的chrome console.log显示来自 www-embed_core_module-vflNmuGQq.js的错误消息:26

不安全的JavaScript尝试从包含网址http://mysite.com的网址访问包含网址http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1的框架。域,协议和端口必须匹配。

有什么想法吗?

2 个答案:

答案 0 :(得分:23)

onYouTubePlayerAPIReady应位于window对象上。

尝试:

window.onYouTubePlayerAPIReady = function() {
        alert('called onYouTubePlayerAPIReady');
        ytIframeplayer = new YT.Player('browser', {
             events: {
                "onStateChange": stopCycle
             }
    });
}

答案 1 :(得分:1)

好像你没有正确关闭这些功能。

最后}关闭了onYouTubePlayerAPIReady(),而不是dispose_ytplayer()

固定代码:

function dispose_ytplayer() {
    (function(){
        var s = document.createElement("script");
        s.src = "http://www.youtube.com/player_api";
        var before = document.getElementsByTagName("script")[0];
        before.parentNode.insertBefore(s, before);
    })();

    alert('called yt_dispose');

    var ytIframeplayer;

    function onYouTubePlayerAPIReady() {
        alert('called onYouTubePlayerAPIReady');
        ytIframeplayer = new YT.Player('browser', {
            events: {
                "onStateChange": stopCycle
            }
        });
    }
}