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

  • Context: Java 
  • Thread starter Thread starter Jamin2112
  • Start date Start date
  • Tags Tags
    Figure Javascript
Join the discussion
Registration is free. Ask a follow-up in this thread, or start your own.
2 replies · 6K views
Jamin2112
Messages
973
Reaction score
12
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.

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

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

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

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

Code:
                       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?
 
Last edited by a moderator:
Physics news on Phys.org
It looks like you defined playVid as the function name and then call ytplayer.playVideo(); which results in 'undefined is not a function'.
 
DavidSnider said:
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.