Java JavaScript: Can't figure out what's going wrong in my use of this API

[Jamin2112]

I've been trying to use Google's YT JS API to build a dynamic web page that plays Youtube videos back-to-back, i.e. a personal playlist. Here's the documentation for the API: https://developers.google.com/youtube/js_api_reference

Right now I am struggling to get the first video to automatically play. Here is the relevant code, which I'll explain below.

	        this.playAll = function()
	        {
	            var vidtexts = document.getElementsByClassName('vidtxt');
	            for (var i = 0, j = vidtexts.length; i < j; ++i)
	            {
                   var thisid = vidtexts[i].value;
                   if (thisid.length > 0)
                   {
    	               var thisurl = "[PLAIN]http://www.youtube.com/v/"[/PLAIN]  + thisid + "?enablejsapi=1&playerapiid=ytplayer&version=3";                    
                       var atts = { id: "myytplayer" };
                       var params = { allowScriptAccess: "always" };
                       swfobject.embedSWF(thisurl, "playerdiv", "425", "356", "8", null, null, params, atts, this.playVid);
                   }
	            }
	        } 
	        this.playVid = function(e)
	        {
	            /* Callback function for swfobject.embedSWF(...), to play the video
	               if the flash player was loaded successfully. */
	            if (e.success)
	            {
                    /* https://developers.google.com/youtube/js_api_reference#GettingReference */
                        ytplayer = document.getElementById("myytplayer");
        	        ytplayer.playVideo();
	            }
	        }

The problem is happening on the lines

ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();

When I first call playAll (by pushing a button), my browser's JavaScript console gives me the error

undefined is not a function

The next time I call the function, there are no errors and the video starts playing, like it should. It is therefore my presumption that playVideo is getting called before ytplayer has been initialized. But that seems weird because getElementById is supposed to finish executing before the next line is executed. I think that maybe ytplayer is not done initializing. But note that this is inside the callback function for the creation of the video player object and inside an if statement that executes only if the video player was successfully created.

The lines

                       var atts = { id: "myytplayer" };
                       var params = { allowScriptAccess: "always" };
                       swfobject.embedSWF(thisurl, "playerdiv", "425", "356", "8", null, null, params, atts, this.playVid);

should have created the video player with an id of "myytplayer" by the time we've reached the problem lines.

Any ideas?

 

[DavidSnider]

It looks like you defined playVid as the function name and then call ytplayer.playVideo(); which results in 'undefined is not a function'.

 

[Jamin2112]

It looks like you defined playVid as the function name and then call ytplayer.playVideo(); which results in 'undefined is not a function'.

I have a class with a member function playVid that in turn calls the playVideo() function from the API. I should probably not have chosen such a similar name.