How to avoid unnecessary buffering in jPlayer

Question

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.

You can avoid this by having a small buffer (I don't know if it's a limitation of flash). I've worked on a video on demad site some time ago and the devs building the player had to do some good testing to find the right balance for the buffer size, as a buffer that is small can cause problems on low speed connections. — Augusto, Jun 04 '11 at 07:44
which attribute should i use? I looked up in the documentation and couldn't find any option for setting buffering values. — footy, Jun 04 '11 at 08:45
Sorry, I have no idea what to use on jplayer, as we built a custom video player. I was just trying to point you to a possible solution. — Augusto, Jun 05 '11 at 00:04
Are you seeing this when using the Flash player, the HTML 5 player, or both? (jPlayer will use different players "under the hood" depending on the browser capabilities.) — Matt Gibson, Jun 09 '11 at 09:53
How to check which it is using? I usually test in chrome and thus assume that it uses the HTML5 version as chrome supports it. — footy, Jun 09 '11 at 15:50
Ok Since it has more than 1000 views, it seems some people out there want it to be corrected. I would suggest a server-side solution for them to dynamically cut the MP3 while delivering it to the jPlayer. That was my final solution. — footy, Apr 03 '12 at 09:43

score 6 · Accepted Answer · edited May 23 '17 at 12:01

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

Hi i am not using an older browser. Latest Chrome/Opera/IE all buffer them. Please check my player deployed here... www.uttarakhandradio.com in any browser... it still buffers...kinda new and learning so how to check if my server supports this buffering or not? i am using an mp3 file which must be stream-able right? — footy, Jun 09 '11 at 15:54
I've tried this in Chrome 13 and the audio plays just fine. If I load the site in a non-HTML5 browser, it is buffering. I will try again on a different browser because I am seeing inconsistent behaviour. The first time I loaded the site (on Chrome 13 but a different machine) the ` — andyb, Jun 13 '11 at 06:29
ouch! thats fully strange behavior for a new bee like me!.... completely at a loss here.. thanks for helping my.. Hope you can tell an answer for it :) — footy, Jun 13 '11 at 17:45
I've updated my answer with a few more ideas but without access to your server, I do not think I can help any more. There are some things you can try. — andyb, Jun 14 '11 at 08:14
Hmmm... still the problem exists... Awarded you the points as you helped the most.. Hope i can find another workaround for this — footy, Jun 26 '11 at 05:53
Did you try a simple single `.mp3` demo with the jPlayer inspector? If you have a simple example that others can view, it might be worth posting to the jPlayer Google Group or another question here and see if anyone else can help. — andyb, Jul 05 '11 at 19:06

How to avoid unnecessary buffering in jPlayer

1 Answers1