javascript - How to get the progress event working with jplayer - Stack Overflow

admin管理员组

文章数量:1391968

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 patible when it es 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 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.

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 patible when it es 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./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.

• javascript
• jquery
• html
• jplayer

Share Improve this question Follow edited Feb 28, 2013 at 21:55 Alexander 23.5k1111 gold badges6464 silver badges7373 bronze badges asked Feb 11, 2011 at 14:35 rogermushroomrogermushroom 5,59644 gold badges4545 silver badges6969 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 pletely 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.

I had problems with the progress event with flash and html5 backend in most browsers. as far as I can see the timeupdate event is working much better.

本文标签： javascriptHow to get the progress event working with jplayerStack Overflow