javascript - 如何在 Youtube 视频播放完毕后为事件添加事件监听器

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、video、ytplayer、ytapiplayer...他们中的大多数都给我一个错误，例如“找不到 ytplayer”。“ytapiplayer”没有抛出错误，但在视频播放完毕后也没有任何反应。

我搜索了堆栈溢出，但到目前为止我找到的所有“答案”都只是命名这个事件监听器，但没有解释我必须在“XXXXX”中放置什么。

我对此很陌生，非常欢迎任何帮助，谢谢!

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

编辑:编辑控件代码，添加 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 时，您是在告诉该库用 swfobject 生成的 div 替换您引用的 div。因此 ytapiplayer div 将不再存在，但会有一个 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 库，它会自动调用您定义的回调，您可以在其中设置与播放器的绑定(bind)、添加事件监听器等。真正的优势在于它将确定是自动提供 HTML5 播放器还是 Flash 播放器，您这边的 API 能够与任一播放器对话。