Help getting autoplay working with Flash fallback

[kenquad]

I am renovating an old jPlayer implementation - jPlayer 1.2.0, jQuery 1.4. I'd supply a link, but my development version is on an intranet.

My setup consists of a list of songs in a table, with a "play preview" button next to each one. Originally I set it up with each button having its own individual jPlayer instance, but once the songs began to multiply, this became ridiculously bloated and slow. So instead, my goal is to instantiate jPlayer for each preview player only at the moment it is needed.

For reference, each "play" link looks like this: "<a href="http://audio/file.mp3" title="22">Play Preview</a>. As you can see from the code, the href and title attributes are pulled from the link to construct the player when the link is clicked, with the number in the title attribute serving as an ID to differentiate between multiple players on the page.

My problem is with autoplay. The code below works perfectly in Chrome and IE9, but not in Firefox - indicating to me that there is some problem with the Flash fallback. However, if I remove the .jplayer("play") directive inside the ready: function, the player works in Firefox. I just have to click the button twice because there's no autoplay on the instantiated player - which is not acceptable for our users.

Using the code below in Firefox, the Play button disappears and is replaced with the Pause button as if the audio is playing, but no sound comes out.

Any help would be greatly appreciated.

$('.jp-preview-play').click(function(e){
        e.preventDefault();
       
        var audioPath = $(this).attr('href');
        var ssId = $(this).attr('title');
        var playerId = "#jquery_jplayer_" + ssId;
        var pauseId = "jplayer_pause_" + ssId;
        var playId = "jplayer_play_" + ssId;
       
        $(playerId).jPlayer({
            volume: 50,
            swfPath: "assets/js/jplayer",
            ready: function () {
              this.element.jPlayer("setFile", audioPath).jPlayer("play");
            }
          })
          .jPlayer("cssId", "pause", pauseId)
          .jPlayer("cssId", "play", playId)
          .jPlayer("onSoundComplete", function() {
            this.element.jPlayer("stop");
          });
         
    });

[Mark Panaghiston]

I'm sorry but we do not really support the older versions of jPlayer 1 now.

All I can suggest is that you inset a delay. I believe that somewhere in the development I added a delay to the Flash ready event generation to get round a bug in Firefox. That was during the jPlayer 2.0 development I believe... But regardless, here is my suggestion. Change the ready function to:

ready: function () {
   var self = this;
   this.element.jPlayer("setFile", audioPath);
   setTimeout(function() {
      self.element.jPlayer("play");
   }, 100);

}

The extra 100ms resolves any race conditions between the Flash instancing and the call being made.

With hindsight now, in jPlayer 2 I use a 100ms delay on the instancing ready event. I know understand that this was required due to me adding the call to the SWF class's constructor. I should have added the ready event to the ADDED_TO_STAGE stage's event. (Or whatever it is actually called.)

[PolrBear]

For not supporting v1, you pretty much nailed it. :-)

We had actually been knocking around the idea of a delay interally, but hadn't tried it yet. Your code works perfectly, and it's great to know that 100ms is the magic number.

Thanks very much!

[PolrBear]

Hmmm.... looks like we're not quite out of the woods yet. It works to autoplay the audio in Firefox, but once the song is over, it never appears to stop - the button stays in "pause" state. If you click it and then hit play again, there is no sound. It works correctly in Chrome.

Any ideas?

[Mark Panaghiston]

Well, technically this part is completely redundant so it might be screwing something up in the Flash.

Try removing this:

.jPlayer("onSoundComplete", function() {
   this.element.jPlayer("stop");
});

When the audio finishes, that "event" occurs. It has already stopped and you are telling something that had stopped to stop during theending process so might put spanner in works since i did not test that due to redundancy.

[Jason M.]

Thanks for the feedback. I have removed that section, but Firefox still exhibits the same falling-off-the-edge-of-the-world behavior. Chrome still works correctly. I've rolled this version of the code to production, so here's a link to the actual page: http://bit.ly/12kYyHN

--
You received this message because you are subscribed to a topic in the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jplayer/Po9xbIeBoCY/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to jplayer+u...@googlegroups.com.
To post to this group, send email to jpl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jplayer?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Mark Panaghiston]

I took a look. Firefox worked for me. The audio played and then the button returned to the play button when it ended.

Maybe you have an older version of Flash installed on your Firefox browser, check here:


The older versions of Flash might behave differently if you have not followed these encoding rules:
http://www.jplayer.org/latest/developer-guide/#jPlayer-media-encoding

You might have used VBR instead of CBR. VBR had problems with older Flash plugins.

[Jason M.]

Hmm... I'm pretty well foxed on this one. I tried it on 4 different Firefoxes, all Win7, and got the same problem. The Windows 8 box I tried, though, had no trouble. The files are all CBR, and my Firefox is running the latest Flash.

Since the effects of this problem are not severe, and are confined to a subset of the user base, I'm inclined to let it go - unless you can think of another possible cause.

[PolrBear]

I just discovered that this problem has nothing to do with my new jPlayer-invoking code. All my players, including the unmodified ones, are behaving this way in the problematic Firefoxes. I think what I may do is just implement the dual OGG presentation; that's healthier for mobile compatibility anyway.

To unsubscribe from this group and all its topics, send an email to jplayer+unsubscribe@googlegroups.com.