[jPlayer] Trouble with seek and stop button

[Joe Lencioni]

I am working on a project that uses jPlayer (currently version 1.1.1)
to play .ogg files in the browser. Access to these files is restricted
in a number of ways so I need to send the requests through a PHP
script and things are mostly working.

However, I am having issues with seeking within a track and the stop
button. Play, pause, next track, previous track, and volume controls
all work flawlessly, but clicking on the progress bar to jump around
the track and clicking on the stop button do nothing. I have been
trying to figure out what is wrong, but I haven't come up with much
yet.

As far as I can tell, this seems to only be happening when I stream
the files through my PHP script. In other words, if I take the
identical file and reference it directly on my server, everything
works as expected. But, when I serve it through my PHP script, the
file plays but the seek and stop features are broken.

These are the headers that are being sent with the two different
files.

Direct request:

HTTP/1.1 200 OK
Date: Mon, 10 May 2010 19:37:23 GMT
Server: Apache/2.2.3 (Red Hat)
Last-Modified: Wed, 14 Apr 2010 21:37:26 GMT
Accept-Ranges: bytes
Content-Length: 2108976
Cache-Control: max-age=600
Expires: Mon, 10 May 2010 19:47:23 GMT
Content-Type: application/ogg


Served through PHP script:

HTTP/1.1 200 OK
Date: Mon, 10 May 2010 19:37:21 GMT
Server: Apache/2.2.3 (Red Hat)
X-Powered-By: PHP/5.3.2
Last-Modified: Wed, 14 Apr 2010 16:37:26 -0500
Accept-Ranges: bytes
Content-Length: 2108976
Cache-Control: max-age=600
Expires: Mon, 10 May 2010 19:47:21 GMT
Content-Type: application/ogg


Versions:
jQuery: 1.4.2
jPlayer: 1.1.1
Google Chrome: 5.0.375.29 beta
Windows: 7

If anybody can help me out, I would greatly appreciate it.
Thanks!

--
You received this message because you are subscribed to the Google Groups "jPlayer: the CSS styleable jQuery audio player plugin" group.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

[Eamon Nerbonne]

Does your php script actually support range requests?

i.e., does it parse the Range headers and send the correct range of bytes with a status 206 - at a minimum; and preferably also deal with ETags and modification headers?  That's generally non-trivial in script, and would cause the kind of issues you're seeing.  You do announce the support for range request via the Accept-Ranges:bytes header, so, you might get away with just dropping that header.

Try attaching something like Http Fiddler and comparing the behaviour of the apache-served requests with your PHP requests.

Good Luck,
Eamon Nerbonne
--ea...@nerbonne.org - Tel#:+31-6-15142163

[Joe Lencioni]

Thanks for the response. Good suggestions--I had actually tried adding
support for range requests using this function on the PHP site:
http://www.php.net/manual/en/function.readfile.php#86244 This gives me
these headers:

HTTP/1.1 200 OK
Date: Tue, 11 May 2010 15:01:54 GMT

Server: Apache/2.2.3 (Red Hat)
X-Powered-By: PHP/5.3.2

Cache-Control: public, must-revalidate, max-age=0, max-age=600
Pragma: no-cache
Accept-Ranges: bytes
Content-Length: 2108976
Content-Range: bytes 0-2108976/2108976
Content-Disposition: inline; filename=02.ogg
Content-Transfer-Encoding: binary

Last-Modified: Wed, 14 Apr 2010 16:37:26 -0500

Connection: close
Expires: Tue, 11 May 2010 15:11:54 GMT
Content-Type: application/ogg

Unfortunately, I am experiencing the same issues with this technique.
I have also tried messing around with some of the headers that it
sends, including your suggestion of dropping the Accept-Ranges: bytes
header, but no combination seems to do the trick.

Any other thoughts?

> > jplayer+u...@googlegroups.com<jplayer%2Bunsu...@googlegroups.com >
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/jplayer?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups "jPlayer: the CSS styleable jQuery audio player plugin" group.
> To post to this group, send email to jpl...@googlegroups.com.
> To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.

> For more options, visit this group athttp://groups.google.com/group/jplayer?hl=en.

[Joe Lencioni]

I discovered some problems with the function that I linked to that I
think are making this not work. I will fix them and keep you posted.

On May 11, 10:06 am, Joe Lencioni <joe.lenci...@gmail.com> wrote:
> Thanks for the response. Good suggestions--I had actually tried adding

> support for range requests using this function on the PHP site:http://www.php.net/manual/en/function.readfile.php#86244This gives me

[Joe Lencioni]

I believe I have it working now. Thanks for your help. The HTTP
Fiddler tool you suggested was quite helpful in tracking down and
solving the issue.

The problem was the PHP function that handles the range requests had
some bugs in it. I fixed them and posted a comment over there. For
reference, here's the fixed version of the function I am using:

<?php
function smartReadFile($location, $filename, $mimeType = 'application/
octet-stream')
{
if (!file_exists($location))
{
header ("HTTP/1.1 404 Not Found");
return;
}

$size = filesize($location);
$time = date('r', filemtime($location));

$fm = @fopen($location, 'rb');
if (!$fm)
{
header ("HTTP/1.1 505 Internal server error");
return;
}

$begin = 0;
$end = $size - 1;

if (isset($_SERVER['HTTP_RANGE']))
{
if (preg_match('/bytes=\h*(\d+)-(\d*)[\D.*]?/i',
$_SERVER['HTTP_RANGE'], $matches))
{
$begin = intval($matches[1]);
if (!empty($matches[2]))
$end = intval($matches[2]);
}
}

if ($begin > 0 || $end < $size)
header('HTTP/1.1 206 Partial Content');
else
header('HTTP/1.1 200 OK');

header("Content-Type: $mimeType");
header('Cache-Control: public, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Accept-Ranges: bytes');
header('Content-Length:' . ($end - $begin) + 1);
header("Content-Range: bytes $begin-$end/$size");
header("Content-Disposition: inline; filename=$filename");
header("Content-Transfer-Encoding: binary\n");
header("Last-Modified: $time");

$cur = $begin;
fseek($fm, $begin, 0);

while(!feof($fm) && $cur < $end && (connection_status() == 0))
{
print fread($fm, min(1024 * 16, ($end + 1) - $cur));
$cur += 1024 * 16;
}
}
?>

On May 11, 1:28 pm, Joe Lencioni <joe.lenci...@gmail.com> wrote:
> I discovered some problems with the function that I linked to that I
> think are making this not work. I will fix them and keep you posted.
>
> On May 11, 10:06 am, Joe Lencioni <joe.lenci...@gmail.com> wrote:
>
>
>
>
>
> > Thanks for the response. Good suggestions--I had actually tried adding

> > support for range requests using this function on the PHP site:http://www.php.net/manual/en/function.readfile.php#86244Thisgives me

[Eamon Nerbonne]

Congratulations - it's not easy fixing bugs in external functions like that :-).

--ea...@nerbonne.org - Tel#:+31-6-15142163

[Joe Lencioni]

I discovered a problem with this code in Chrome. Apparently, sending the HTTP 200 header prevents Chrome from displaying the progress bar and allowing seek. So, change this:

if ($begin > 0 || $end < $size) 
header('HTTP/1.1 206 Partial Content'); 
else 
header('HTTP/1.1 200 OK'); 

To this:

header('HTTP/1.1 206 Partial Content');

And it works again.

Here's the full function:

/**

* Reads the requested portion of a file and sends its contents to the client with the appropriate headers.

* 

* This HTTP_RANGE compatible read file function is necessary for allowing streaming media to be skipped around in.

* 

* @param string $location

* @param string $filename

* @param string $mimeType

* @return void

* 

* @link http://php.net/manual/en/function.readfile.php#86244

*/

function smartReadFile($location, $filename, $mimeType = 'application/octet-stream')

{

if (!file_exists($location))

{

header ("HTTP/1.1 404 Not Found");

return;

}

$size = filesize($location);

$time = date('r', filemtime($location));

$fm = @fopen($location, 'rb');

if (!$fm)

{

header ("HTTP/1.1 505 Internal server error");

return;

}

$begin = 0;

$end = $size - 1;

if (isset($_SERVER['HTTP_RANGE']))

{

if (preg_match('/bytes=\h*(\d+)-(\d*)[\D.*]?/i', $_SERVER['HTTP_RANGE'], $matches))

{

$begin = intval($matches[1]);

if (!empty($matches[2]))

{

$end = intval($matches[2]);

}

}

}

header('HTTP/1.1 206 Partial Content');

header("Content-Type: $mimeType"); 

header('Cache-Control: public, must-revalidate, max-age=0');

header('Pragma: no-cache');  

header('Accept-Ranges: bytes');

header('Content-Length:' . (($end - $begin) + 1));

header("Content-Range: bytes $begin-$end/$size");

header("Content-Disposition: inline; filename=$filename");

header("Content-Transfer-Encoding: binary");

header("Last-Modified: $time");

$cur = $begin;

fseek($fm, $begin, 0);

while(!feof($fm) && $cur <= $end && (connection_status() == 0))

{

print fread($fm, min(1024 * 16, ($end - $cur) + 1));

[Mark Panaghiston]

Nice stuff Joe. Thank you for updating us.

Chrome is so fussy about the connections. It is not jPlayer. Put an <audio controls> element in the page with the URL and you would have had the same problem.

Best regards,
Mark P.

[Mark Panaghiston]

Hi Joe,

Does your PHP function work serving files to IE9?

I think that your response is slightly off... And all your responses are like a Range request, but if the Range is not in the request, then the whole file should be served, without the Content-Range response header.

I think this is causing IE9 to complain and it refuses to play an <audio> element with an MP3 being served through this PHP.

Best regards,
Mark P

[Mark Panaghiston]

This new code works with IE9 and every other browser tested... Mobile and standard.

From Eoin at www.bitesizeirishgaelic.com who made the changes and was generous enough to share it with us all:

"I've simply put in two additional checks for whether it's a Range request. That determines the HTTP response sent back (200 or 206), plus if the "Content-Range" value is included."

[PAJ]

Could someone provide an example of how to serve an MP3 via this streaming php function?

[Don Cullen]

Thanks for sharing the SmartRead function; I was having trouble streaming MP3's, and this effectively solved my problem. Thank you!

[Don Cullen]

Found out the SmartRead function was failing for Safari browsers when serving MP3's. After doing research and troubleshooting, found that if I called SmartRead with a third parameter with Mpeg 3 mime types, it effectively solved the problem. Example code:

# Stream MP3

smartReadFile($track, basename($track), 'audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3');

Hope this helps anyone who runs into a similar problem.

[addinm...@gmail.com]

Can someone tell me more abt servers ?

Sent from my BlackBerry® wireless device

---

From: chacham15 <chacha...@gmail.com>

Sender: jpl...@googlegroups.com

Date: Thu, 15 Nov 2012 18:09:50 -0800 (PST)

To: <jpl...@googlegroups.com>

ReplyTo: jpl...@googlegroups.com

Subject: Re: [jPlayer] Re: Trouble with seek and stop button *

This message is eligible for Automatic Cleanup! (chacha...@gmail.com) Add cleanup rule | More info

[Mark Panaghiston]

@Chacham15: Who are you taking to?

What is not correct?

The post you attached in your post is older than the latest version of the smartReadFile() function code posted in the thread.

The code has the header you talk about (Accept-ranges:bytes) and it is only 1 of the many pieces of the puzzle. And the code already has that bit in it.

What was your point?

On Friday, 16 November 2012 02:09:50 UTC, chacham15 wrote:

This is actually not correct. I am implementing my own custom server so I ran into this issue as well. The reason that chrome does not allow you to seek is because there is no Accept-Ranges header, meaning that the server isnt telling the client that it can seek. The full header that should be returned by the server is: "

Accept-Ranges:

bytes"

-chacham15

[h4ni]

Hello

i have also a seek problem with jplayer :/ (swf forced version)

dzmusique.com

Can Mark help me?

[toddvalentine]

Has anyone been able to get this working on iOS 5.1. In particular the iPad 3?

On Saturday, November 24, 2012 6:54:27 AM UTC-6, Gabriel Spiteri wrote:

Hi 

We just implement the smartRead fix and it seems to work great on all browsers accept IE9. Any pointers please?

[ikazuchi]

Do this:

header("Content-Type: application/octet-stream");

header("Content-Type: audio/mpeg"); 

Instead of this:

header("Content-Type: $mime"); 

On Saturday, November 24, 2012 4:54:27 AM UTC-8, Gabriel Spiteri wrote:

Hi 

We just implement the smartRead fix and it seems to work great on all browsers accept IE9. Any pointers please?

On Monday, May 10, 2010 9:47:57 PM UTC+2, Joe Lencioni wrote:

[Ralph Theart]

Does this php solution work for m3u8 streams as well?

[Nasir Uddin Ahmed]

@h4ni How do you do it? can you help me please.

dzmusique.com

[Marek FlashT Rucinski]

The problem is not a player itself, but movie file metadata is missing or incorrect. Try this: http://ffmpeg.zeranoe.com/blog/?p=59 it helped me.

2013/10/16 Nasir Uddin Ahmed <nasir...@gmail.com>

@h4ni How do you do it? can you help me please.

dzmusique.com

--
You received this message because you are subscribed to a topic in the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jplayer/nSM2UmnSKKA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jplayer+u...@googlegroups.com.

To post to this group, send email to jpl...@googlegroups.com.

Visit this group at http://groups.google.com/group/jplayer.
For more options, visit https://groups.google.com/groups/opt_out.

[Nasir Uddin Ahmed]

Hi... i have also a seek problem with jplayer  Can Mark help me?

Requesting http://www.mysite.com/file.php

SERVER RESPONSE: HTTP/1.1 200 OK

Date: Sun, 20 Oct 2013 14:33:19 GMT

Server: Apache

Cache-Control: public, must-revalidate, max-age=0

Pragma: no-cache

Accept-Ranges: bytes

Content-Disposition: inline; filename=myfile.mp3

Content-Transfer-Encoding: binary

Content-Length: 8874824

Last-Modified: Sun, 20 Oct 2013 06:59:25 GMT

Vary: Accept-Encoding

X-UA-Compatible: IE=edge,chrome=1

Content-Type: audio/mpeg

[Hal]

Hi Mark,

 

The way to hide by downloading video file with the file of smartReadFile.php works for me across ie,chrome,firefox,opera, but not on safari (even the safari is on iOS7.0.4).

 

So I have to add the true video path in jPlayer for safari.

 

Is there other way to hide video on safari browser?

 

thanks

[Mark Panaghiston]

I understood that it did work for safari.
You are not trying to autoplay it on iOS are you?
 - Because that would not work and is a different issue entirely. iOS inhibit autoplay.

[sanb...@gmail.com]

For the life of me, I could not get this code to work for me out of the box.

I had to add the following line (to signal a redirect from the initial request) after the possible '404' and '505' responses:

header("Location: $location");

[Jill Earles]

Hi Mark,

I've just been trying to set this up to hide the location of my audio files, and am having trouble getting it to work.  I'm trying to use the smartReadFile.php attached here, and it's currently working on Mac 10.7.5 in Chrome 33.0 and Opera 19.0, but not in Firefox 27.0.1 or Safari 6.1.1; on Windows 7 Pro, it's currently working in Safari 5.1.7, not working in Firefox 27.0.1, not working in IE 11 (those are all the browsers I have readily available for testing).  I've tried some of the suggestions others have posted here (adding header("Content-Type: application/octet-stream"); and header("Location: $location"); but took them back out since they didn't help.  Here is my code:

require_once('smartReadFile.php');

// Get name passed via URL

$code = $_GET['file'];

$basePath = 'media/';

// Translate into real filename

switch ($code) {

    case 'm39Hek.mp3':

        $track = 'realFilename.mp3';

        $type = 'audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3';

        break;

     case 'm39Hek.ogg':

        $track = 'realFilename.ogg';

        $type = 'audio/ogg, audio/x-ogg, application/ogg, application/x-ogg';

        break;

    default:

        $track = '';

}

$path = $basePath.$track;

smartReadFile($path, $track, $type);

You can test this at http://coastsolitude.com/test/, login with username: help, password: jPlayer.  

Thank you very much for your help. Have a good day.

Jill

[Mark Panaghiston]

I took a look Jill... Full marks for having it setup online and easy to review.

On inspection under Win 7 Firefox 27.0.1, i was able to duplicate the problem. So I looked at the media url directly:
http://coastsolitude.com/test/media.php?file=m39Hek.ogg

Firefox spat that out with a download link. It should play it natively... This means that the MIME types are not acceptable.
The same happened with the mp3 version url.

I just looked around a little to see if you can specify multiple mime types... But i could not find anything. Change the types to:
MP3:
$type = 'audio/mpeg';
OGG:
$type = 'audio/ogg';

And you'll be fine.

[Jill Earles]

Mark, Thank you very much for looking into this.  I've updated the MIME types to only one per extension as you recommended, and this fixed it in all the browsers I have (including Torch 25.0 on Mac, which I forgot to mention), except Safari on Mac, which is pretty important.  It does work on my iPhone, so am hoping that means it works on iPad Safari versions as well (will get a friend to check).  

I've done a lot of searching for possible solutions (which is how I ended up with multiple MIME types), but haven't found anything that works in Safari on Mac OS 10.7.5.  I'll ask some friends to test Safari on Mac also in case it's something specific to my computer.  Do you have a Mac available on which to test this?

Thanks again for your help.  This is much closer!  Have a good night.

[Mark Panaghiston]

That is an older mac OS... What version of Safari does that support?
(I'm assuming you keep the Mac updated.)

Also, try visiting the URL directly on the mac and see if it works or "what happens".

Consider that the browser might be trying to play using Flash, so review your Flash version. But, jplayer should have flagged that... It was showing a friend jPlayer on his old Mac, many moons ago, that prompted me to add in the no-solution message. Meaning you should see that if Flash is old and the browser is not html5 media.

I am doing a review now on OSX 1.9.1 Safari 7.0.1
Yep, It does not work here either.

Gah! It's a new mac and I can't find the developer tools option - Ah yes! In the preferences, the very last option LOL.

Using the dev tools it says...
Type: Other
Status: -
Cached: No
Size: -
Transfered: -

I looked at the Chrome dev tools since they seem to actually let you see the response header. <rant>Safari try too hard LOL and give tons of info that no-one gives a crap about. But having said that, the interesting thing Safari tools spat out was that jPlayer generated an error event, which would usually be trickier to spot without adding stuff to the page.</rant>

Back to the response header... Maybe the default response of the smartreadfile is slightly incorrect after all...
It appears to by default return a 206 partial content response... Normally it should give a different response when the range request says "give me everything". Maybe that is what Safari is suspicious of the response...

As a test, I pasted the URL direct into safari... I did the OGG 1st in error and it downloaded and plays from my download folder just fine in VLC... So I then tried the mp3 and the Safari dev tools showed the error. Still rather cryptic...

OK, I would need to look into this. i'll get back to you.

[Jill Earles]

My Safari version currently is 6.1.1, and I just tried to run Software Update and it failed (may need to restart or something).  I had a couple of friends test, one in 7.0.1, and one in 6.0.5, and both failed.  When going to media.php directly, with the mp3 version which Safari is said to support, it just says "loading", but never loads.  Will try to see what I can using Safari Developer Tools also (haven't used those much).  

Thanks so much for your help with this.  I really like jPlayer.

[Mark Panaghiston]

No changes yet, but I put the PHP file onto a more sensible system:
https://github.com/happyworm/smartReadFile

Still need to add in some nods to the original devs... Eoin got credit, but there was an earlier contributor that did the very first version... It was a long time ago now.

I plan to maintain the file in the github repo from now on and will report beck here if i have any success... I plan to setup a demo on the jplayer.org site that uses it.

One thing... I have never actually used this file, but I wondered if this PHP API is a security risk... Send in the media file url of /etc/some/path and get the text file spewed out into the browser.

Your thought?

[Jill Earles]

Would you say more about what you're thinking regarding the security risk?

Definitely worth making sure you sanitize what's sent into it.  The way my code uses it is with a switch, so that only the "codes" I put in my playlist js file will do anything.  Could be other risks I'm not thinking of though.

[Jill Earles]

Thanks for putting this on github, and am pleased that you used my code for the example.  :)

Glad you think this is worth adding to jplayer.org with a demo.

[Jill Earles]

Just realized something you said earlier could be an issue too:

" I did the OGG 1st in error and it downloaded and plays from my download folder just fine in VLC…"

The whole point of this (for me at least) is to prevent downloading, while allowing the audio to be played through jPlayer.  

Related to that, during my research of this, I found something that said that Safari on Mac uses QuickTime for playing audio and video.  There's a setting on our web host that's designed to prevent downloading of specified file types and it says that for files to be played in QuickTime on Mac, you have to allow direct linking (which enables downloading), and I was able to verify that Safari would not play audio when direct linking was not allowed and would play it when it was allowed (using the direct path to the files in the playlist js, no php).  That's when I started looking for a PHP solution.

[Mark Panaghiston]

@Jill: I used your code as a starting point... I then let it evolve. I think the 1st and last lines remain the same now ;) It was a fine seed, and I like seeds. Respect! <chest thump>

Current info for group:

1) I added a security whitelist. Expand list as required, but never include / since that is never in a sensible filename. Failure gives 404.
2) Grabs the type from the file extension for common extensions. Well, the sensible one... If you want to use a WAV then, as the emperor says, "So be it." But you can add it :P

@Jil: To disable access you should be checking for rights in the PHP before you call smartReadFile(). For example, you can use the session and have a user/login system and then check the session before serving the file. If they are not logged in, which you'd check on the session, you then give a 404 error or you could be horrible and server a highly (sound spectrum) compressed and normalized white noise signal... Or a loud sine wave, since they have a lot of power and are annoying.

I will add a comment about this to the example code... I've not actually touched the smartReadFile.php itself yet. I'm getting all the boring shite out the way first.

[Sinisa Novakovic]

Don't you people do anything else in your lives except waisting your time sending e-mails to each about this bullshit player?

/:-))

---

Date: Wed, 26 Feb 2014 20:49:58 -0800
From: mark.pan...@gmail.com

To: jpl...@googlegroups.com
Subject: Re: [jPlayer] Re: Trouble with seek and stop button

You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jplayer+u...@googlegroups.com.

[Mark Panaghiston]

@Sinisa: Well I have my cat Lenny. I spend a significant amount of time recovering from the wounds I receive while petting him. When not administering first aid to a circulatory injury, I enjoy writing JavaScript code and attempting to educate others on how to use it. I used to take long walks in the country, but it is a tad cold out there at this time of year and my long years sitting on my derrière have not been kind. Instead, I spend my time helping others achieve their goals, while trying not to bleed on anything important.

If you find the emails too much, you can adjust your settings on the Google Group website. The vast majority choose to receive no emails and they only receive emails from threads they have commented on. They seem happy, all 5700 of them.

What do you spend your evenings doing when exhausted from trolling?

Might I dare to suggest you take a look at this:
http://earth.nullschool.net/

I find it quite soothing and it suppresses my desires to destroy those who cross me :D