Search code examples
javascriptjqueryjquery-eventsjplayer

Issues with binding to $.jPlayer.event.error


I'm seemingly not able to bind to the $.jPlayer.event.error event, but I am able to bind to other event.

I'm using a Backbone view to control jPlayer, and here's the initialize function:

initialize: function() {
    _.bindAll(this, 'render', 'get_media_url', 'on_player_error',
              'play', 'scrub', 'move_playhead', 'on_media_progress',
              'on_player_ready', 'on_player_timeupdate', 'on_player_ended',
              'set_progress_bar',  'set_current_time', 'time_from_percent');
    // set up jplayer and bind essential events to view methods, bound to the current object
    $(this.player).jPlayer(this.player_defaults);
    $(this.player).bind($.jPlayer.event.ready, _.bind(this.on_player_ready, this));
    $(this.player).bind($.jPlayer.event.timeupdate, _.bind(this.on_player_timeupdate, this));
    $(this.player).bind($.jPlayer.event.ended, _.bind(this.on_player_ended, this));
    $(this.player).bind($.jPlayer.event.progress, _.bind(this.on_media_progress, this));
    $(this.player).bind($.jPlayer.event.error, _.bind(this.on_player_error, this));
    this.current_state = this.PAUSED;
},
on_media_progress: function(event){
    $('time#total').html($.jPlayer.convertTime(event.jPlayer.status.duration));
},

on_player_error: function(event){
    alert(event);
},

(cut off the rest of the methods due to brevity, but you'll see the methods are defined the same; on_media_progress fires without fail. on_player_error however, NADA!)

on_player_ready, on_player_timeupdate, on_player_ended and on_media_progress all fire correctly.

on_player_error, however, never gets called.

I've got only an MP3 being passed into setMedia, and I do not have Flash installed and I'm loading the page on Firefox 9.0.1, but

If I set errorsAlert: true in the this.player_defaults object, jPlayer presents it's own error dialog, but my error handler still never fires.


Solution

  • The answer, thanks to the jPlayer Google Group, the answer is that you need to do all your binding prior to instantiating the jPlayer object -- once it's been instantiated the error event has already fired, so you can't capture it anymore!

    So you need to do this:

    $(this.player).bind($.jPlayer.event.ready, _.bind(this.on_player_ready, this));
    $(this.player).bind($.jPlayer.event.timeupdate, _.bind(this.on_player_timeupdate, this));
    $(this.player).bind($.jPlayer.event.ended, _.bind(this.on_player_ended, this));
    $(this.player).bind($.jPlayer.event.progress, _.bind(this.on_media_progress, this));
    $(this.player).bind($.jPlayer.event.error, _.bind(this.on_player_error, this));
    $(this.player).jPlayer(this.player_defaults);