如何在Youtube视频播放完毕后为Event添加Event Listener

Question

我正试图在youtube视频结束后启动一个事件。视频嵌入是有效的，但一旦视频结束，什么都不会发生。我想我遗漏了EventListener的一些内容。。。

这是我的代码：

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
var video = swfobject.embedSWF("http://www.youtube.com/v/elvOZm0d4H0?enablejsapi=1&playerapiid=ytplayer&version=3&rel=0&autoplay=1&controls=1","ytapiplayer", "450", "250", "8", null, null, params, atts);
XXXXX.addEventListener("onStateChange", function(state){
    if(state === 0){
        alert("Stack Overflow rocks!");
    }
});

我不明白的是，我应该听什么？代码中标记有"XXXXX"，我需要在那里放什么？我试过myytplayer、视频、ytplayer和ytapiplayer。。。他们中的大多数人都会给我一个错误，例如"找不到ytplayer"。"ytapiplayer"没有抛出错误，但一旦视频播放完毕，也不会发生任何事情。

我搜索了stack Overflow，但到目前为止我找到的所有"答案"都只是命名这个事件侦听器，但没有解释我必须在"XXXXX"处放什么。

我是个新手，非常欢迎任何帮助，谢谢！

JSFIDDLE：http://jsfiddle.net/T5HBZ/

edit：编辑控件代码，添加jsfiddle

Answer 1

这是您的工作代码，然后我将对其进行解释：

var params = {
    allowScriptAccess: "always"
};
var atts = {
    id: "myytplayer"
};
var video = swfobject.embedSWF("http://www.youtube.com/v/elvOZm0d4H0?enablejsapi=1&playerapiid=ytplayer&version=3&rel=0&autoplay=1&controls=1", "ytapiplayer", "450", "250", "8", null, null, params, atts);
onYouTubePlayerReady = function (playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
};
onPlayerStateChange = function (state) {
    if (state === 0) {
        alert("Stack Overflow rocks!");
    }
};

首先要注意的是，当你用swfobject嵌入播放器SWF时，你会告诉该库用swfoject生成的div替换你引用的div。因此，ytapiplayerdiv将不再存在，但将有一个id为"myytplayer"的元素请注意，当您将"enablejsapi=1"附加到swf URL时，swf将加载视频并加载允许您控制视频的javascript。

这是关键；当这个javascript加载完成后，它会自动调用一个名为"onYouTubePlayerReady"的函数——没有办法更改这个名称，因为它是从youtube加载的javascript的一部分。如果不定义该函数，则不会发生任何事情。不过，如果你定义了这个功能，你就有机会开始与玩家互动。

因此，您的代码缺少该函数的定义，在该定义中，您可以将事件侦听器直接添加到swfobject创建的元素上（它必须在该函数内部进行；如果您尝试在回调之外进行，则该对象可能还不存在）。

还要注意，出于某种原因，让事件侦听器引用一个实际函数作为其回调（而不是匿名函数）似乎更一致可行，因此您也会在代码中看到这一点。

当然，所有这些讨论都可以通过指出使用iFrame播放器API而不是SWF/Javascript API来代替。信息在这里：

https://developers.google.com/youtube/iframe_api_reference

这是一种类似的方法，即加载一个javascript库，该库将自动调用您定义的回调，在回调中设置与播放器的绑定，添加事件侦听器等。真正的优势是，它将自动决定是为HTML5还是Flash播放器服务，而您一侧的API可以与任何一个播放器对话。