StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strike>It's the flash polyfill that needs to buffer. Older browsers that do not support HTML5 <code><audio></code> will suffer from this problem, where the jPlayer flash fallback used instead.</strike></p> <p>Your web server must support seeking a stream.</p> <p>See <a href="https://groups.google.com/forum/#!searchin/jplayer/buffering/jplayer/BfoeiQDXpMM/88lKXkfuZNoJ" rel="nofollow noreferrer">this jPlayer Google Group</a> question about buffering and <a href="https://stackoverflow.com/questions/2798931/seeking-through-a-streamed-mp3-file-with-html5-audio-tag">Seeking through a streamed MP3 file with HTML5 <audio> tag</a> & <a href="https://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSU" rel="nofollow noreferrer">https://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSU</a> for a discussion on seeking and <a href="http://greenbytes.de/tech/webdav/rfc2616.html#header.accept-ranges" rel="nofollow noreferrer">Accept-Ranges</a> headers.</p> <p><strong>Edit:</strong> I've done some digging into this problem… although I'm sorry that I still do not have a final answer.</p> <p>Firstly, the <a href="http://www.jplayer.org/latest/developer-guide/" rel="nofollow noreferrer">jPlayer Development Guide</a> details the issues with <a href="http://www.jplayer.org/latest/developer-guide/#jPlayer-server-mp3-ogg-response" rel="nofollow noreferrer"><code>.mp3</code> files and the Accept-Ranges header</a>. If you use Chrome you can actually see the Accept-Ranges request and response header - if you press <kbd>F12</kbd> and select the <em>Network</em> tab. Clicking on the <code>.mp3</code> file, you can inspect the headers. The good news is that is does look like your server <strong>does</strong> support the Accept-Ranges header. However, it still does not explain why sometimes it needs to buffer the download first.</p> <p>I think you should start with a <em>simple</em> demo, with no flash support and a single <code>.mp3</code>. Your playlist is randomly generated so it is difficult to determine if the problem is only for certain files. Also, I have used the <a href="http://www.jplayer.org/latest/js/jquery.jplayer.inspector.js" rel="nofollow noreferrer">jPlayer Inspector</a> which can give detailed statistics for jPlayer which may help to diagnose the problem.</p> <pre><code><!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> </code></pre> <p>You could also change the demo code above to include:</p> <pre><code>swfPath: 'jQuery.jPlayer.2.0.0', solution: 'flash, html', </code></pre> <p>in the jPlayer constructor to force Flash to be the default player.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload