Tutorial :javascript addEventListener onStateChange not working in IE


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. By the way, this is my first time at stackoverflow and it's very impressive.


Well, this is my current code. It works perfect in FF, 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.


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


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);     }  


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 =).

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »