iPhone cannot play audio at Sermon Details page

Dear all,

I have SermonSpeaker 5.3 on Joomla 3.4.1 on CentOS 7.0.
The player on Sermon Detail page cannot play on iPhone. It plays well on desktop.
radio.bpfbs.com/index.php/component/serm...ge-wasser?Itemid=101
The very same mp3 can be played at demo page of sermonspeaker.net on my same iPhone.
www.sermonspeaker.net/listings/sermons/s...ebendige-wasser.html
What did I miss?
Thanks all.
System information for reference:
Linux 3.10.0-123.el7.x86_64 #1 SMP Mon Jun 30 12:09:22 UTC 2014 x86_64
DB: 5.5.41-MariaDB
Collation: utf8_general_ci
PHP: 5.4.16
Apache/2.4.6 (CentOS) PHP/5.4.16
Joomla! 3.4.1 Stable [ Ember ] 21-March-2015 20:30 GMT
Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT

The main differences between desktop and mobiles are

• Desktop have Flash, Mobiles don't. That means mobiles use HTML5 to play the file while desktops usually use the Flash player. The players included with SermonSpeaker all have some sort of HTML5 fallback in case Flash isn't installed. HTML5 works great usually, but depends a bit on the browser in which formats it supports
• Mobiles have the smaller bandwith/worse connection than desktops. Which may cause the download of the file to time out or there may be somethign going on from the provider.

Since you tried with the same file which works on my demo server, we can rule out the size of the file.

You could try to use a different layout. The Icon one is hardcoded to use the PixelOut player (since the others just don't look well there). The other layouts will use the JW Player. Maybe that works better.
If that doesn't help, it may be a connection issue or a slow server.

Dear Mr Hunziker,
You are right. PixelOut player does not play on iPhone. I see "Player needs JavaScript and Flash turned on." if I put the player on Series List, for example. So it does not play on a layout hardcoded to use PixelOut. I changed to another layout which respect the "Player" setting option. Then the audio plays with a quicktime player.

But I am still jealous about SemonSpeaker demo site which could use Icon layout at single sermon, and it plays on iPhone. It looks so elegant to play in-line. I think the demo site must have modified something from the basic installation, because it says "Streaming" when I click the play button.
Would you tell me how SermonSpeaker demo did that?
(I am testing on my local LAN so it should not be related to bad connections.)
Thank you very much.

The demo site doesn't have anything special. It's the regular unmodified layout.
Maybe the server is set up differently. I don't know that however as it's just a regular cheap shared hosting company

Dear Mr Hunziker,
I found a clue. I opened Chrome's Javascript console and see there are http 404 error on some loads of %2Ffilename.mp3 if the mp3 is placed at document root, or %2Fimages%2Ffilename.mp3 when it is placed at /images folder.
Attached please see side-by-side comparison of my site and SermonSpeaker. (I tried to insert a picture here but failed, but you can easily see this by Chome Javascript console.)
No matter what I do I could not get rid of the %2F at the left. The file detail page seem to require me to enter a preceding "/" to the file name.
How should I solve this?
I see SermonSpeaker demo there is no 404 error and there is no %2F at the left.

Can you try when you go to the SermonSpeaker options -> player tab. Try the "- Use Plugin -" setting in the player selection. Then go to the plugin manager and make sure you have the players you want installed and enabled. If they are not yet installed, you can download the plugins here: www.sermonspeaker.net/download.html
You probably want the JW Player one and the Pixelout.