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”没有抛出错误，但一旦视频播放完毕，也没有任何反应。

我搜索了堆栈溢出，但到目前为止我找到的所有“答案”只是命名这个事件监听器，但是没有解释我必须在“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网址时，swf会加载视频并加载javascript，以便您控制视频。

这是关键;当javascript完成加载时，它会自动调用名为“onYouTubePlayerReady”的函数 - 没有办法更改该名称，因为它是从youtube加载的javascript的一部分。如果您没有定义该功能，则不会发生任何事情。但是，如果您确实定义了该功能，则可以开始与播放器进行交互。

所以你的代码缺少的是该函数的定义，在其中你将一个事件监听器直接添加到由swfobject创建的元素上（它在这个函数中发生;如果你试图在回调，对象可能还不存在。）

另请注意，由于某种原因，使事件侦听器引用实际函数作为其回调（而不是匿名函数）似乎更加一致，因此您也会在代码中看到它。

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

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

这是一种类似的方法，因为你加载了一个javascript库，它会自动调用你定义的回调，在其中设置你对播放器的绑定，添加事件监听器等。真正的优点是它将决定是否自动提供HTML5或Flash播放器，您身边的API可以与任一播放器通话。

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

1 个答案: