使用闭包脚本中的 Youtube IFrame API

Question

在关闭脚本中初始化 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 构造函数工作，但后来我将 extern from https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/google_youtube_iframe.js 添加到闭包编译器并成功创建了 player 对象。

但是我在控制台中收到了 api ready 消息，但没有收到 player ready 消息，这意味着 onPlayerReady 从未被调用。

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

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

有什么问题吗？

Answer 1

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

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

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

使用闭包脚本中的 Youtube IFrame API

Using Youtube IFrame API from closure script

google-closure

youtube-iframe-api