javascript - How to add Event Listener for Event after Youtube video is finished playing - Stack Overflow

admin管理员组

文章数量:1388072

I am trying to get an event fired once the youtube video reached its end. The video embedding works, but nothing happens once the video ends. I think I am missing something for the EventListener...

this is my code:

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };

var video = swfobject.embedSWF(";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!");
    }
});

What I do not get is, what I should listen to? Marked with "XXXXX" in the code, what do i need to put there? I tried myytplayer, video, ytplayer, ytapiplayer... most of them give me an error, e.g. "ytplayer can not be found". "ytapiplayer" did not throw an error, but also nothing happens once the video is finished playing.

I searched stack Overflow, but all the "answers" I found so far are just naming this event listener, but do not explain what I have to put at "XXXXX".

I am pretty new to this and any help is very wele, thanks!

JSFIDDLE: /

edit: edited code for controls, added jsfiddle

I am trying to get an event fired once the youtube video reached its end. The video embedding works, but nothing happens once the video ends. I think I am missing something for the EventListener...

this is my code:

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };

var video = swfobject.embedSWF("http://www.youtube./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!");
    }
});

What I do not get is, what I should listen to? Marked with "XXXXX" in the code, what do i need to put there? I tried myytplayer, video, ytplayer, ytapiplayer... most of them give me an error, e.g. "ytplayer can not be found". "ytapiplayer" did not throw an error, but also nothing happens once the video is finished playing.

I searched stack Overflow, but all the "answers" I found so far are just naming this event listener, but do not explain what I have to put at "XXXXX".

I am pretty new to this and any help is very wele, thanks!

JSFIDDLE: http://jsfiddle/T5HBZ/

edit: edited code for controls, added jsfiddle

• javascript
• youtube
• youtube-api

Share Improve this question Follow edited Aug 23, 2013 at 9:12 wunderblume asked Aug 23, 2013 at 9:03 wunderblumewunderblume 3311 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here's your working code, and then I'll explain it:

var params = {
    allowScriptAccess: "always"
};
var atts = {
    id: "myytplayer"
};

var video = swfobject.embedSWF("http://www.youtube./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!");
    }
};

The first thing is to note that, when you embed the player SWF with swfobject, you are telling that library to REPLACE the div you reference with the one generated by swfobject. So the ytapiplayer div will no longer exist, but there will be an element with the id of 'myytplayer.' Note that, when you append the 'enablejsapi=1' to your swf URL, then the swf will load the video AND load the javascript allowing you to control the video.

This is key; when that javascript is done loading, it will automatically call a function named "onYouTubePlayerReady" -- there isn't a way to change that name, as it's part of the javascript loaded from youtube. If you don't define that function, nothing happens. If you do define that function, though, you have the opportunity to start interacting with the player.

So what your code was missing was a definition of that function, within which you add an event listener directly onto the element that was created by swfobject (it HAS to take place inside this function; if you try to do it outside of the callback, the object might not exist yet).

Also note that, for some reason, it seems to be more consistently workable to have the event listener reference an actual function as its callback (rather than an anonymous one), so you'll see that in the code as well.

Of course, all this discussion can be superseded by pointing out that you might be much better served by using the iFrame player API instead of the SWF/Javascript API. The info is here:

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

It's a similar methodology, in that you load a javascript library, which automatically will call a callback that you define, inside of which you set up your bindings to the player, add event listeners, etc. The real advantage is that it will determine whether to serve the HTML5 or the Flash player automatically, with the API on your side being able to talk to either player.

本文标签： javascriptHow to add Event Listener for Event after Youtube video is finished playingStack Overflow