Javascript addEventListener onStateChange not working in IE

Question

I have two colorbox popup boxes which show a YouTube video in each. When they're finished playing, I'm trying to have them automatically close the colorbox window. This code below works perfect in Firefox, but in IE I can't get addEventListener to work. I've tried attachEvent with no success. Can anybody offer any suggestions as to how to solve this? It seems simple but I'm exhausted trying to find a solution.

UPDATE 1:

Well, this is my current code. It works perfect in Firefox, but IE only outputs good. IE8 debugger doesn't report any errors either...

function onYouTubePlayerReady(playerId) {
  if (playerId && playerId != 'undefined') {
    if(playerId && playerId == 'ytvideo1'){
      var ytswf = document.getElementById('ytplayer1');
      alert('good');
    } else if(playerId && playerId == 'ytvideo2'){
      var ytswf = document.getElementById('ytplayer2');
    } else {
    }

    setInterval('', 1000);
    ytswf.addEventListener('onStateChange', 'onytplayerStateChange');
    alert('great');
  }
}


function onytplayerStateChange(newState) {
  alert('amazing');
  if(newState == 0){
    $.fn.colorbox.close();
    alert('perfect');
  }
}

Update 3: Solution

Simply put onComplete in my colorbox and put the swfobject in that and it worked perfectly in IE.

Cargo

addEvent should work. Can you show the code of how you are using addEvent. – Commentative

I simply did ytplayer.attachEvent("onStateChange", onytplayerStateChange); right below addEventListener, I didn't put in a condition, figured it wouldn't matter. – Cargo

I updated my code with an attachEvent in the ytvideo2, it works in FF but not IE. I MUST get this to work in IE. I'm testing in FF, IE8, and IE compatibility mode (IE6?), works on neither IE. A workaround would be fine, any suggestions? – Cargo

Let me make sure I understand what you're saying. Running the code you show above, you do NOT see a 'great' alert in IE and you do not get any error reports? When you say IE, you mean no version of IE whatsoever? Can you provide a link to a test page so that I might take a look? It seems to me that if the example page I provided in my answer works in IE, that you know the Google code is fine. You should now be trying to figure out what is difference between your code and Google's. – Leeuwarden

Answer 1

from testing in IE it looks like the reference you are using

ytswf = document.getElementById('ytplayer1');

is assigned before the actual swf object is loaded, so IE thinks you are referring to a simple div element

you need to run this code

function onYouTubePlayerReady(playerId) {
  ytswf = document.getElementById("ytplayer1");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

right after you call

swfobject.embedSWF("http://www.youtube.com/v/SPWU-EiulRY?
hl=en_US&hd=0&rel=0&fs=1&autoplay=1&enablejsapi=1&playerapiid=ytvideo1",
"popupVideoContainer1", "853", "505", "8", null, null, params, atts);

before you close out that $(function()

and place var ytswf; right after the <script> instead of further down

Litta

Well, I've spent 4 hours on it just because it got me curious, and unfortunately I came up empty handed. It's not attachEvent however. It's... colorbox. Something it does that IE can't quite reference the youTube object after the render. Take a look at the source code here: here states are being captured with the absense of colorbox: plain7.com/test.htm and here, no go: plain7.com/test2.htm ... and this is only in IE, other browsers get it right. I give up :) It's almost 5am and I'm braindead. May be try some other lightbox implementation (though colorbox is my fave as well) – Erickson

hah, now you see how i've felt the past 2 weeks... thanks for looking into it, I'm sure I can find an alternative to colorbox, that will just take some serious modifications. I'm going to mark your answer as correct simply because now I know that attachEvent is not the problem. thanks again! – Cargo

Thank you for the points, Derek, even though I feel I didn't help that much. I had a thought though, what if you load swfObject AFTER you render the colorbox window, like, in a callback to colorbox. I don't know what other problems it might create, but before you go switching lightboxes, may be it's something worth trying. – Erickson

Answer 2

IE doesn't support addEventListener does it?? You need attachEvent right?

if (el.addEventListener){   
    el.addEventListener('click', modifyText, false);    
else if (el.attachEvent){   
    el.attachEvent('onclick', modifyText);   
}

Shoreline

Answer 3

New answer

The YouTube player object implements its own addEventListener method which is more like how AS3's syntax. As per the information listed here:

player.addEventListener(event:String, listener:String):Void

YouTube provides an example on the page I linked which I'll provide here:

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}

YouTube also provides an example page that seems to prove out that their example code works in IE. I'll link that example page here.

Now, here's an attempt at re-writing the pertinent parts of your code to work as per the examples provided by Google/YouTube:

function onYouTubePlayerReady(playerId) {
  if(playerId && playerId == 'ytvideo1'){
    var ytplayer = document.getElementById('ytplayer1');
  } else if(playerId && playerId == 'ytvideo2'){
    var ytplayer = document.getElementById("ytplayer2");
  } else {
    return;
  }

  ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
}

So, it turns out that the mistake being made here arises from the confusion created by the use of the method name 'addEventListener'. In the W3C JavaScript implementation, the second parameter is a function while in the YouTube implementation, the second parameter is a string. Give this a shot =).

Leeuwarden

I changed the onYouTubePlayerReady in my original question to reflect your answer. In FF it alerts 1, in IE it alerts 2. FF works as expected, IE does not run the function onytplayerStateChange. Am I using attachEventHandler correctly? would using the bind() function help my situation? – Cargo

Again, works in FF, not IE. Perhaps an example would help you guys solve my problem. – Cargo

Derek, please open the example page that I linked in my answer, and tell me if you are seeing onStateChange events show up in your version of IE. I've tested in IE8, and it appeared to work just fine for me. Also, please note that the third parameter is not necessary in addEventListener. Try and replace your onYouTubePlayerReady with the one I provided, and report back. You shouldn't need the branching statements at all. – Leeuwarden

I've tried the youtube example page in IE8 and the player state does work. For some reason they won't allow me to use compatibility view on that page. I usually test both IE6 and IE8, I'm going to try and figure out this code this afternoon. The updated code above still won't give me a good result but i'm going to play with it a lot. Thanks for your help, I'll get back to you asap. – Cargo

Can you please look at my code in Update 1 above. It's my attempt to take strait from the youtube code. – Cargo

This is incorrect. AS 3 is .addEventListener( type:String, func:Function (followed by optional arguments) ):void; AS 2 is slightly different( parameter 2 is "A reference to a listener object or function." ), but the signature is NOT player.addEventListener(event:String, listener:String):Void; -1 – Bush

Chris, can you check out my test link above? – Cargo