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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With