CODEWITHSUNDEEP
javascriptyoutubedom-events
CodeOverload
CodeOverload

Reputation: 48485

Why my youtube video doesn't report events?

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>

Upvotes: 1

Views: 1202

Answers (1)

jamesmortensen
jamesmortensen

Reputation: 34038

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:

 5
 3
 1
 0

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

Upvotes: 4

Related Questions