Working with onStateChange of Youtube player

I was trying to use the onStateChange property of Youtube videos, And I could not get it to work. I searched a lot over it but could not really understand how it works. Here is the code which I tried, I added a console.log, which does not get called. Can someone help me?

This is my code:

    <script type="text/javascript">
        function onYouTubePlayerReady(playerId) {
            var player = document.getElementById("YTplayer");
            player.addEventListener("onStateChange", "onplayerStateChange");
        }

        function onplayerStateChange(newState) {
            console.log('test');
        }
    </script>
        <object style="hei开发者_运维问答ght: 390px; width: 640px">
            <param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3">
            <param name="allowFullScreen" value="true">
            <param name="allowScriptAccess" value="always">
            <embed 
                src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3" 
                type="application/x-shockwave-flash" 
                allowfullscreen="true" 
                allowScriptAccess="always" 
                width="640" height="390"
                id="YTplayer">
        </object>

You must define the id in playerapiid pramameter or use the given one in the onYouTubePlayerReady callback

<object style="height: 390px; width: 640px">
        <param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&playerapiid=YTplayer">
        <param name="allowFullScreen" value="true">
        <param name="allowScriptAccess" value="always">
        <embed 
            src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&playerapiid=YTplayer" 
            type="application/x-shockwave-flash" 
            allowfullscreen="true" 
            allowScriptAccess="always" 
            width="640" height="390"
            id="YTplayer" />
</object>