jquery event handling how to use

Question

I am using plugin from jsmovie. It has basic usage like

$('.movie').jsMovie({
   images : ['loader_ani4x4.png'],
   folder : 'pic/loader/',
   height : 40, width: 40,
   grid   : {height:40, width:40, columns:4, rows:4},
   showPreLoader : false,
   playOnLoad    : true
}); 

and events like

 *  play    -   is triggered when the movie starts playing
 *  pause   -   is triggered when the movie pauses
 *  stop    -   is triggered when the movie stops
 *  ended   -   is triggered when a clip played its last frame
 *  playing -   is triggered when the movie enters a frame
 *  loaded  -   is triggered when the movie has finished its loading process
 *  verbose -   is triggered when the movie outputs a verbose, the callback has an extra argument like function(e,output){} which contains the text

How i can use playing event ?

I tried like this but does not work

 $('#movie').jsMovie.playing(function(v){
    console.log();
});

Answer 1

Try that:

$('#movie').on('playing',function(){ /* your code */});

Answer 2

From the word 'trigger' I assume that this library is firing events on the dom object. I'm not sure but probably you could use this:

$('#movie').on('playing', function() { ... });

Answer 3

Checking the source file, I found inside an the function play_movie_event wich is the function that play the movie (frame by frame). It look like that :

function play_movie_event(e, fromFrame, toFrame, repeat, performStop){

    if(fromFrame === undefined || fromFrame < 1){
        fromFrame = 1;
    }

    if(toFrame === undefined || toFrame > $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns){
        toFrame = $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns;
    }

    if(repeat === undefined){
        repeat = $(this).data("settings").repeat
    }

    if(performStop === undefined){
        performStop = true;
    }

    if($(this).data("currentStatus") == 'play'){
        clearInterval($(this).data("playingInterval"));
        $(this).data("currentStatus","playing");
        var self=this;
        $(this).data("playingInterval",setInterval(function() {
            // FPS Measurement
            if($(self).data("realFpsTimeStamp") != undefined){
                $(self).data("realFps",1/(((new Date()).getTime()-$(self).data("realFpsTimeStamp"))/1000));
                //verboseOut.apply($(self),[$(self).data("realFps").toFixed(2)+"fps"]);
            }else{
                $(self).data("realFps",$(self).data("settings").fps);
            }
            $(self).data("realFpsTimeStamp",(new Date()).getTime());

            // play frames
            if($(self).data("settings").playBackwards){
                if($(self).data("currentFrame").data('frame') == fromFrame && !repeat){
                    if(performStop){
                        $(self).trigger('stop');
                    }else{
                        $(self).trigger('pause');
                    }
                    $(self).trigger('ended');
                }else{
                    $(self).trigger('playing');
                    if($(self).data("currentFrame").data('frame') != fromFrame){
                        methods.previousFrame.apply($(self));
                    }else{
                        methods.gotoFrame.apply($(self),[toFrame]);
                    }
                }
            }else{
                if($(self).data("currentFrame").data('frame') == toFrame && !repeat){
                    if(performStop){
                        $(self).trigger('stop');
                    }else{
                        $(self).trigger('pause');
                    }
                    $(self).trigger('ended');
                }else{
                    $(self).trigger('playing');
                    if($(self).data("currentFrame").data('frame') != toFrame){
                        methods.nextFrame.apply($(self));
                    }else{
                        methods.gotoFrame.apply($(self),[fromFrame]);
                    }
                }
            }

        }, 1000/$(this).data("settings").fps));
    }
}

You probly don't care how it work, but what is important is lines like those:

if($(self).data("currentFrame").data('frame') == toFrame && !repeat){
    if(performStop){
        $(self).trigger('stop');
    }else{
        $(self).trigger('pause');
    }
        $(self).trigger('ended');
}

You can see all those trigger. They are placed everywhere inside the document. That mean the good way to use them is with .on()

$('#movie').on('stop', function(){})

Check jQuery docs to know what .trigger() does : http://api.jquery.com/trigger/

Answer 4

I don't know this plugin but usually you can attach to an event on initialization

$('.movie').jsMovie({
   images : ['loader_ani4x4.png'],
   folder : 'pic/loader/',
   height : 40, width: 40,
   grid   : {height:40, width:40, columns:4, rows:4},
   showPreLoader : false,
   playOnLoad    : true,
   //events
   playing: function(v){
        console.log();
   };
}); 

or you can use the jQuery.on method:

$('#movie').on('playing',function(){ console.log(); });

Answer 5

From the source code:

$(this).trigger("play",[fromFrame,toFrame,repeat,performStop]);

is called at line 249. this in this case is the DOM element, as it can be seen by the plugin registration:

$.fn.jsMovie = function(method) {
    //snip...
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply(this, arguments );
    //snip...
};

The jsMovie plugin itself seems to listen to a few of its own events:

$(this).bind("play",play_movie_event);
$(this).bind("stop",stop_movie_event);
$(this).bind("pause",pause_movie_event);

So you can just follow their own example. In the end, you should listen to the events like this (as others have suggested):

$('#movie').on('play',function(event,fromFrame,toFrame,repeat,performStop) {
    // event handler function
});