events - 在 YUI.add 中跟踪 Youtube 播放器的状态

Question

我播放 Youtube 视频的嵌入代码是:

<object height="356" width="425" type="application/x-shockwave-flash" id="myytplayer" data="http://www.youtube.com/v/MTf6qXn5Prw?enablejsapi=1&amp;playerapiid=ytplayer&amp;version=3"><param name="allowScriptAccess" value="always"></object>

我想跟踪 Youtube 播放器的事件(播放/暂停/停止等)

以下代码独立工作

window.onYouTubePlayerReady = function(playerId){
 ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");

}

window.onytplayerStateChange = function (newState) {
  alert("Player's new state: " + newState);

}

我正在使用 YUI。

当我把同样的东西放进去

YUI.add('module-name', function(Y) {

[some other code...]

window.onYouTubePlayerReady = function(playerId){
 // console.log(playerId); console.log(ytplayer);
  ytplayer = document.getElementById("myytplayer");

  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");

}

window.onytplayerStateChange = function (newState) {
  alert("Player's new state: " + newState);

}

},'3.4.0', {requires:'module-a', 'module-b'})

函数 onytplayerStateChange 在 Firefox 和 Safari 中有效，但在其他浏览器中无效。

然后我尝试了 YUI 函数以使其在所有浏览器中都能正常工作，所以我做了一些更改

window.onYouTubePlayerReady = function(playerId){
  var shinyPlayer = Y.one("#myytplayer");
  shinyPlayer.on('onStateChange', function (e) {
            e.preventDefault();
            alert('here');
        });
}

但这对我不起作用。

我不想将 window.onytplayerStateChange 放在 YUI.add('module-name', function(Y) {}) 之外

请建议我应该怎么做才能在所有浏览器中跟踪 Youtube 播放器的状态。

提前致谢。

Answer 1

我做了一个 jsFiddle 来测试这个:

http://jsfiddle.net/2Mj6b/4/

对我来说，感觉 addEventListener 是 Google 的自定义实现。
通常第二个参数是回调/函数指针，没有字符串。

如果您将变量附加到窗口对象，它将成为全局变量，并且来自每个可见范围。所以在 YUI 模块中定义是没有问题的。

第二个问题是您不能将播放器用作 YUI 对象，您必须留在 dom 对象上才能完成这项工作。

哦，这是一个老问题。该死。但无论如何我都会发布这个。 ;)