Menu
I have a jPlayer (HTML5 song player using jquery) and it starts to play a song from xx secs of a song.
But the problem is it has to first buffer the XX secs and then starts to play which is waste of bandwidth. Why doesnt it start its buffering from XX secs itself?
Here is the code i use:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: playList[0],
volume: CUR_VOL
}).jPlayer("play", 251);
},
swfPath: "js",
supplied: "mp3",
errorAlerts: false
});
EDIT
I wanted an answer for avoiding the buffering of first XX seconds.
662
It's the flash polyfill that needs to buffer. Older browsers that do not support HTML5 <audio> will suffer from this problem, where the jPlayer flash fallback used instead.
Your web server must support seeking a stream.
See this jPlayer Google Group question about buffering and Seeking through a streamed MP3 file with HTML5 <audio> tag & https://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSU for a discussion on seeking and Accept-Ranges headers.
Edit: I've done some digging into this problem… although I'm sorry that I still do not have a final answer.
Firstly, the jPlayer Development Guide details the issues with .mp3 files and the Accept-Ranges header. If you use Chrome you can actually see the Accept-Ranges request and response header - if you press F12 and select the Network tab. Clicking on the .mp3 file, you can inspect the headers. The good news is that is does look like your server does support the Accept-Ranges header. However, it still does not explain why sometimes it needs to buffer the download first.
I think you should start with a simple demo, with no flash support and a single .mp3. Your playlist is randomly generated so it is difficult to determine if the problem is only for certain files. Also, I have used the jPlayer Inspector which can give detailed statistics for jPlayer which may help to diagnose the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="jQuery.jPlayer.2.0.0/jquery.jplayer.min.js" type="text/javascript"></script>
<script src="jQuery.jPlayer.2.0.0/jquery.jplayer.inspector.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#jplayer').jPlayer({
ready: function () {
$(this).jPlayer('setMedia', {
mp3: 'mp3/example.mp3'
});
},
swfPath: 'not_a_valid_directory',
solution: 'html, flash',
supplied: 'mp3'
});
$('#jplayer_inspector').jPlayerInspector({jPlayer:$('#jplayer')});
$('#seeker').click(function() {
$('#jplayer').jPlayer('play', 20);
return false;
});
});
</script>
</head>
<body>
<div id="jplayer"></div>
<a href="#" id="seeker">Play 20s from start</a>
<div id="jplayer_inspector"></div>
</body>
</html>
You could also change the demo code above to include:
swfPath: 'jQuery.jPlayer.2.0.0',
solution: 'flash, html',
in the jPlayer constructor to force Flash to be the default player.
183
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
