Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

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

  1. Jun 12, 2014 #1
    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 (Text):

                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] [Broken] + 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 (Text):

    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 (Text):

    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 (Text):

                           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: May 6, 2017
  2. jcsd
  3. Jun 12, 2014 #2

    DavidSnider

    User Avatar
    Gold Member

    It looks like you defined playVid as the function name and then call ytplayer.playVideo(); which results in 'undefined is not a function'.
     
  4. Jun 12, 2014 #3
    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.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




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