2

一旦 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

4

1 回答 1

3

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

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 时，您是在告诉该库将您引用的 div 替换为 swfobject 生成的 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 库，它会自动调用您定义的回调，在其中您设置与播放器的绑定，添加事件侦听器等。真正的优势是它将确定是否自动提供 HTML5 或 Flash 播放器，您的 API 可以与任一播放器对话。

于 2013-08-23T17:53:35.903 回答