How to get the progress event working with jplayer

Question

I am using jQuery 1.5 and jPlayer 2.0.0, please ignore the fact that this is going to auto play music, I am going to supply enough warning before it starts, the user has to press a big button to initiate the page and I will provide a big STOP button.

I would like the audio file to begin playing and a function be called after the page is ready and the audio is loaded.

I have the following javascript (I have modified the code so it can be understood better).

function FemeMusic() {

    FemeMusic.prototype.addMusic = function(actionAfterMusic) {
        $("#jp").jPlayer({
            ready: function() {
                var jPlayerElement = $(this);
                jPlayerElement.jPlayer('setMedia', {
                    mp3: 'aSongByJamesBlunt.mp3'
                });
                jPlayerElement.bind($.jPlayer.event.progress,
                function(event) {
                    if (event.jPlayer.status.seekPercent === 100) {
                        jPlayerElement.jPlayer("play");
                    }
                    if (actionAfterMusic) {
                        actionAfterMusic.call();
                    }
                });
             },
             swfPath: "/flash",
             preload: "auto"
         });
    }
} 

I have this function to trigger the above code.

$(document).ready(function() {
    var femeMusic = new FemeMusic();
    femeMusic.addMusic(killMyself); 
});

I was using the same code but with the $.jPlayer.event.loadeddata event without the if statement instead of $.jPlayer.event.progress and it worked fine in some browsers but isn't compatible when it comes to using flash because it doesn't fire the event (Also I had a problem with it in firefox 3.5 but I don't know why). The above seems to work in Firefox

I read this

"I suggest you use the progress event instead and check that the: event.jPlayer.status.seekPercent === 100. "

On this post http://groups.google.com/group/jplayer/browse_thread/thread/9dc9736f9d6947bd?pli=1 by the creator

Any one got any suggestions?

---

Edit

Having not got this working in chrome and safari I tested this on a new version 3.6 of Firefox (which I should have done in the first place) and it worked as expected, despite the fact that in the documentation event.progress id described as:

A robust jPlayer event supported by Flash and HTML5 browsers

and in the link above the creator suggests to use event.progress to get round browser problems I can only assume it's a browser specific issue.

Would be nice to get some clarification on this though.

Answer 1

From the creator of jPlayer:

So your goal here is to auto-play AFTER the media is buffered?

If you want the short answer. Forget it. x-browser buffering is a mine field. Some simply ignore it as you have found. Just setMedia and play it.

If you really want to try and do it. Then a play then pause would help, since a media.play() is better x-browser than a media.load() i.e. its operation varies less. The iOS Safari would ignore the play completely though. The user would need to click on something that starts the operation i.e. a play button.

That last point applies to trying any form of autoplay, so ensure that there is a play button available. The jPlayer interface will cope with iOS not playing through feedback from the browser events i.e. stalled.