I'm looking for a way to detect a play event in an embedded Youtube video via Javascript. Right now I'm able to detect state change, but I can't figure out how to unbind the event after and fire another event saying that it's plete. I'd also prefer not to use add/removeEventListener because I guess IE8 and below don't have this function.

My code so far,

    function onYouTubePlayerReady(playerId) {
    console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
     }
}

function sendYtUrl() {
    console.log('play detected');
    ytplayer.removeEventListener("onStateChange");
} 

I'm hoping to pop into sendYtUrl, remove listener, then do whatever I need to do, or even better, keep it cleaner and leave it in the same function.

Thanks in advance!

I'm looking for a way to detect a play event in an embedded Youtube video via Javascript. Right now I'm able to detect state change, but I can't figure out how to unbind the event after and fire another event saying that it's plete. I'd also prefer not to use add/removeEventListener because I guess IE8 and below don't have this function.

My code so far,

    function onYouTubePlayerReady(playerId) {
    console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
     }
}

function sendYtUrl() {
    console.log('play detected');
    ytplayer.removeEventListener("onStateChange");
} 

I'm hoping to pop into sendYtUrl, remove listener, then do whatever I need to do, or even better, keep it cleaner and leave it in the same function.

Thanks in advance!

• javascript
• jquery
• api
• youtube
• event-listener

2 Answers 2

You don't have to unbind the onStateChange event to know when the video ends or is pleted. The onStateChange only needs to have one event listener. It will be fired and return the following states every time any of these situations occur:

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

In your function onytplayerStateChange, add another if statement to catch when the video is plete:

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
    } else if(newState === 0) {
        console.log("Video has ended!");
    }
}

Thank you so much! That bumped me in the right direction.

Here's what I ended up doing.

var ytPlaying = 0;
var ytPlayed = '';
var currPlaying = '';

function onYouTubePlayerReady(playerId) {
    //console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytPlayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    currPlaying = window.location.hash;
    //console.log("Player's new state: " + newState);
    if (newState === 1) {
        console.log('playing');
        clientSideTracking();
    }   
}


function clientSideTracking() {
   // console.log('client tracking');
    //console.log(currPlaying, ytPlayed);
    if (currPlaying != ytPlayed) { // if current playing isn't the same as prior played
        //console.log('different'); // then it's different - track it.
        var event = new AnalyticsPageEvent('Youtube Analytics', currPlaying);
        event.trigger();
    }
    ytPlaying = 0; // change back to 'not played' and change to 0 so that it's logged
    ytPlayed = currPlaying;

}

What it does is trigger the AnalyticPageEvent when there's a new URL that hasn't been played yet. :)