从关闭脚本中使用 Youtube IFrame API答案

【问题标题】：Using Youtube IFrame API from closure script从关闭脚本中使用 Youtube IFrame API
【发布时间】：2015-11-05 04:14:44
【问题描述】：

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

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

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

关闭脚本包含以下部分：

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 函数添加到外部，但也没有帮助。

可能出了什么问题？

【问题讨论】：

标签： google-closure youtube-iframe-api

【解决方案1】：

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

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

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

【讨论】：