Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which jPlayer event designates the ability to start playing?

I have a basic jPlayer set up which plays a (150MB) audio file from AWS S3. My setup basically looks like this.

  jQuery(function() {
    var $player, jPlayerDefaults, progressCount;

    $player = $('<div>');
    progressCount = 0;
    jPlayerDefaults = {
      ready: function(e) {
        console.log("player ready");

        $player.jPlayer('setMedia', {
          mp3: 'http://s3-eu-west-1.amazonaws.com/some/file.mp3'
        });

        return $player.jPlayer('play', 1234);
      },

      seeking: function(e) {
        return console.log("seeking");
      },

      seeked: function(e) {
        return console.log("seeked");
      },

      canplay: function(e) {
        console.log('canplay');
      },

      progress: function(e) {
        return console.log("progress", progressCount += 1);
      },

      playing: function(e) {
        return console.log("playing");
      },

      error: function(e) {
        return console.log("Error loading audio.", e);
      },

      supplied: 'mp3',
      preload: 'auto'
    };

    $player.jPlayer(jPlayerDefaults);
  });

My understanding from the HTML5 audio spec and this SO question is that the canplay event designates the point at which the audio should start playing.

However, when I run the code above (with an empty browser cache), I get the following log.

player ready
progress 1
progress 2
progress 3
progress 4
canplay
seeking
playing
progress 5
...
progress 888
seeked
progress 889
...
progress 896

I only hear audio playing after the seeked event. This event happens a long time (minutes) after the canplay event.

Is this expected behavior or am I doing something wrong? Also, is jPlayer following the HTML5 <audio> tag spec faithfully here?

Edit: Incase you were wondering, AWS S3 does accept Byte-Range requests.

like image 716
David Tuite Avatar asked May 14 '13 13:05

David Tuite


1 Answers

I think this is the problem might be: return $player.jPlayer('play', 1234); you are asking the player to begin play once the media is seekable to that point try just

return $player.jPlayer('play'); or return $player.jPlayer('play', 5);

more details here http://www.jplayer.org/latest/developer-guide/#jPlayer-play the small note under the parameter, it wasn't easy to find it

like image 110
chickpeas Avatar answered Nov 15 '22 00:11

chickpeas