Question

I’m doing a video player using JQuery and the YouTube JS API, i’ve varios methods for control the youtube player object, for example:

     setVolumen: function (value) {

        if (value < 0 || value > 100) {
            this.throwError("Volumen inválido: "+ value);
            return;
        }

        this.volume = value;

        this.elements.player.each(function () {
            if (typeof this.setVolume != "undefined") {
                this.setVolume(value);
            }
        });
    },

“this.elements.player” is a jquery selector of the yt player object. I call a setVolume method from player-controll instance and works. ex:

        // This is inside a method of controller class
        // and self is a reference to "this" in method context

        this.celements.volume.slider({
            max: 100,
            value: 100,                
            change: function (event, obj) {
                self.setVolumen(obj.value);
            }
        });

If i move the slider element, this works without problems, buy i call a method from jquery selector:

$(‘#playlist’).UplayList(‘setVolumen’,80);

this thrown “Error: Error calling method on NPObject!”

The object exist, and setVolume isn’t undefined. I dont understand.

In Jquery a have:

$.fn.extend({

    UplayList: function (options) {
        this.each(function  () {

            if ($(this).data('uplaylistId')) {
                var instance = $.playList.instances[$(this).data('uplaylistId')];
                instance[options].apply( instance, Array.prototype.slice.call( arguments, 1 ));
            } else {
                var instance = new $.playList(this, options);
                var id = instance.elements.player.attr('id');
                $(this).data('uplaylistId',id);
            }

        });
    }
});

Answer 1

I faced no problem with Youtube API or jQuery.

When I receive the method called, in between each of the elements of “this”, (JQuery selector) verify the context of the options passed.

I changed this to:

$.fn.extend({

    UplayList: function (method) {

        if ($(this).data('uplaylistId')) {
            var instance = $.playList.instances[$(this).data('uplaylistId')];
        } else {
            var instance = new $.playList(this, method);
            var id = instance.elements.player.attr('id');
            $(this).data('uplaylistId',id);
            return $(this);
        }

        if ( instance[method] ) {
            return instance[method].apply( instance, Array.prototype.slice.call( arguments, 1 ));
        } else {
          $.error( 'Method ' +  method + ' does not exist' );
        }

    }
});

The variable “arguments” content as second element is an object. So when I call setVolume method sending an element as a parameter, this received an integer value.

Now the arguments are in the correct context.