Why my youtube video doesn't report events?

Question

Take a look at this code. It actually loads the video perfectly, but it doesn't fire onPlayerStateChange when pausing, loading, or playing the video.

I've already implemented a function to print any new video status, but it doesn't even report events.

Why isn't the onPlayerStateChange firing?

Code from JSBin:

<body>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("swfobject", "2.1");
    </script>    

        
    <script>
        
        function onYouTubePlayerReady(playerId) {
            var myplayer = document.getElementById("myplayer");
            myplayer.cueVideoById("pGBMFxN_eys",0, "default");
            myplayer.addEventListener("onStateChange", onPlayerStateChange);
        }
        
        function onPlayerStateChange(newState){
            log(newstate);
        }

        function log(text){
        document.getElementById('logarea').innerHTML+=text+"<br/>";
        console.log(text);
        }

        function setup(){
        var params = { allowScriptAccess: "always",wmode:"transparent" };
        var atts = { id: "myplayer" };
        swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
                      "&enablejsapi=1&playerapiid=mojplayer",
       "greatvideo", "400", "300", "8", null, null, params, atts);   
        }
    
        google.setOnLoadCallback(setup);
    </script>

  
<div id="logarea">
</div>

<div id="greatvideo">
</div>    
  
</body>

You should normally try to include code in your question, not link to it. This is so other people in the future can see it, when the site it's hosted on might no longer exist. It also helps when reading what the solution was, since you can compare easily. TL;DR: Please edit your question to include all information including code snippets. — David, Jan 28 '11 at 05:20

score 4 · Accepted Answer · edited May 23 '17 at 09:58

There are two bugs in your code that are preventing this from working. Once you make these changes, you'll see the following output above your YouTube video:

The bugs are as follows:

Use quotes around callback, or use an anonymous function:

 // put callback in quotes or anonymous function
 myplayer.addEventListener("onStateChange", "onPlayerStateChange");

Make sure parameter matches local variable passed to log function:

 function onPlayerStateChange(newState){
        log(newState);  // variables are case sensitive
 }

NOTE: addEventListener may not work in IE browsers. I'm running Ubuntu and don't have IE available, but you may need to use browser detection to use attachEvent in IE browsers. This was tested on Chrome 8.0.

I also signed up for a jsapi key. The documentation was unclear as one google page said the API Key was required to use Google Loader, while the API page itself said it was not required. You may not need to obtain a key, but if you still have trouble after making the above changes, I would suggest you obtain a key to rule out this variable in the equation.

http://code.google.com/apis/loader/signup.html

Resources:

YouTube Adding Event Listeners

YouTube EventListener Player Demo

UPDATE: This works in Chrome 8.0, Firefox 3.6, and IE8. It does not work in IE7. But instead of wasting energy on a dead browser, do the community a favor and redirect those small subset of users to an upgrade link so they can join the year 2011. :) The IE7 build I used is part of IECollections and is not the real IE7.

If you have a subset of users who, for whatever reason, are tied to older versions of IE7, and you wish to support these users, please see javascript addEventListener onStateChange not working in IE

you are THE MAN, thx a lot, in chrome, is necessary OnPlayerStateChange parameter be "newState", with other name doesnt work. — levi, Sep 25 '12 at 18:48
No @levi, since the parameter name was "newState", it just had to match the variable passed into the log function. You can name your function parameters whatever you want, just remember that they are case sensitive. `function onPlayerStateChange(text) { log(text); }` would work just as well. Hope this helps! :) — jamesmortensen, Sep 26 '12 at 03:05

Why my youtube video doesn't report events?

1 Answers1