Question

在闭包脚本中初始化Youtube IFrame播放器API的正确方法是什么？

现在我在大豆模板中有以下部分：

<iframe id="youtube-player" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Closure脚本包含以下部分：

var player;
onYouTubeIframeAPIReady = function() {
    console.log('api ready');
    player = new YT.Player('youtube-player', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
};
function onPlayerReady(event) {
    console.log('player ready');
    event.target.playVideo();
}
function onPlayerStateChange(event) {
}

首先，我努力让YT.Player构造函数工作，但后来我从https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/google_youtube_iframe.js添加了extern到闭包编译器，并成功创建了player对象。

但是我在控制台中收到了api ready消息，但没有player ready，这意味着永远不会调用onPlayerReady。

当我尝试通过传递空div的ID并将videoId参数添加到YT.Player构造函数选项来创建iframe时，会创建youtube iframe但不指向任何视频

此外，我尝试将onPlayerReady函数添加到外部，但它也没有帮助。

可能出现什么问题？

Answer 1

问题是events构造函数选项中的YT.Player字段已由闭包编译器重命名。

因此，执行它以避免重命名的正确方法是：

onYouTubeIframeAPIReady = function() {
    console.log('api ready');
    player = new YT.Player(playerId, {
        'events': {
            'onStateChange': onPlayerStateChange
        }
    });
    console.log(player);
};

从闭包脚本中使用Youtube IFrame API

1 个答案: