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

UPDATE 1:

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.


Solution: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


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


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


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