Playlist with 'supplied: "mp3"' not displaying in Firefox 3.6.

[Owen Bush]

Hello,

I just started using JPlayer for an application I am building. I have the single player working fine, very happy with that.

I do however have an issue with the playlist version. I generate the JS code dynamically on the page but for some reason when I don't include 'oga' in the 'supplied' the playlist does not load.

For example this is my generated code:

<div id="jquery_jplayer_3" class="jp-jplayer"></div>

		<div id="jp_container_3" class="jp-audio">
			<h3>Listen to Foo Release by BAR</h3>

			<div class="jp-type-playlist">
				<div class="jp-gui jp-interface">
					<ul class="jp-controls">
						<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>

						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>

						<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>

						<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
					</ul>
					<div class="jp-progress">

						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<div class="jp-volume-bar">

						<div class="jp-volume-bar-value"></div>
					</div>
					<div class="jp-time-holder">

						<div class="jp-current-time"></div>
						<div class="jp-duration"></div>
					</div>
					<ul class="jp-toggles">
						<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>

						<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
						<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>

						<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
					</ul>
				</div>
				<div class="jp-playlist">
					<ul>
						<li></li>
					</ul>
				</div>

				<div class="jp-no-solution">
					<span>Update Required</span>
					To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>

		</div>

	
	<script type="text/javascript">
	jQuery(document).ready(function($){
		new jPlayerPlaylist(
				{
					jPlayer: "#jquery_jplayer_3",
					cssSelectorAncestor: "#jp_container_3"
				}, 
				[
					{
						title:"Foo's Wonderful Music",
						artist:"BAR",
						mp3:"/audio/Foos-Wonderful-Music.mp3"
					},
					{
						title:"Foo's Excellent Track",
						artist:"BAR",
						mp3:"/audio/Foos-Excellent-Track.mp3"
					},
				] 
				{
					swfPath: "/js/jplayer",
					supplied: "mp3"
				}
		);
	});
	</script>

The important part has been highlighted in bold. If I have 'supplied: "mp3"', or indeed if I do not have this parameter at all (given that the default is just "mp3"), the playlist does not display at all and the tracks do not play. Weird. If I add in "oga, mp3", the playlist displays but won't play. If I have just "oga" again the playlist displays but does not play.

I am using the new version of jPlayer (2.1.0) and I grabbed the jplayer.playlist.min.js file from the add-on directory in the zip file.

This problem seems to be in Firefox 3.6 but it all works fine in Chrome and IE7. The media plays if accessed directly via the URL.

Can anyone point me in the right direction for trying to solve this issue? This will be a great feature for my application and as such I am at a dead-end temporarily until I can get this issue resolved.


Thanks in advance

Owen

P.s. I hope posting the code doesn't get garbled so I posted it to pastebin incase: http://pastebin.com/4yF3ZFkz

[Owen Bush]

In the code I pasted, I had accidentally removed the comma after the ] before the following section:

{
	swfPath: "/js/jplayer",
	supplied: "mp3"
}

However, that comma is actually there in the code.

[Mark Panaghiston]

The usual cause of that problem is that your swfPath is wrong, or you forgot to upload the Jplayer.swf to the location.

The reason why supplied:"oga" shows the playlist is because jPlayer uses the native HTML5 media solution in the browser. The ready even is generated by timeout and not through the Flash.

The reason why the oga did not play... Is because jPlayer does not have a magic wand to turn mp3 into oga format. You'd have to define them in the playlist object, and have them encoded and online ready to be.... supplied.

[Owen Bush]

The swfPath used is the same swfPath I use for my single player which is working correctly in Firefox and the Jplayer.swf file is located in that directory.

I didn't expect the oga to play as you say I am providing an mp3 not an ogg file. But I still can't get the playlist to load in Firefox when using "mp3" and not "oga". I've used Fiddler to debug the HTTP traffic and the Jplayer.swf is returning a 200 header response and is being retrieved correctly.

Are there any other reasons why the playlist may not be loading in Firefox?

[Owen Bush]

I've just uploaded an example of what is happening. Absolutely nothing else on the page.

http://obush.co.uk/jplayer/


The player will not display the playlist in Firefox 3.6.21, but does in other browsers (Chrome, IE)



This is baffling me and becoming a large stumbling block so any help would be greatly appreciated.


Thank you,

Owen

[Mark Panaghiston]

I just took a look in Firefox 6 (before I turned on my FF3.6 pc) and the swfPath is wrong.

FireBug shows it clearly as a 404 error under the net tab.

The url it is trying to find it at is here:
http://obush.co.uk/jplayer/js/jplayer/Jplayer.swf

No idea where your Jplayer.swf path is. I looked around in a few possible places...

Ah! Found it here, based on your JS file:
http://obush.co.uk/jplayer/jplayer/Jplayer.swf

Your swfPath should be, for a relative url:
swfPath:"jplayer"

Or server root relative:
swfPath:"/jplayer/jplayer"

[Owen Bush]

I did reply to this, but I think I accidentally clicked Reply To Author. I'm not even sure what that does - if anything, so I thought I would update this again.

Anyway, thanks again Mark for taking time to have a look into the issues I've been having.

I knew that when I'd upload my demo that I would mess something up and I did indeed mess up. You are correct that the swfPath was wrong, I missed that completely on the link I posted.

I changed it to "jplayer" as it should be and re-uploaded the file. Now both Fiddler and Firebug show the Jplayer.swf as returning a 200 header response and it is being retrieved correctly. This is exactly what I am experiencing on my development server. However, the playlist still does not display in Firefox 3.6.21, even though the .swf file is being retrieved.

I spent a long time debugging and adding breakpoints to the JS files with Firebug yesterday to try and work out what was happening and the only thing I managed to come up with was that the $.jPlayer.event.ready never seems to fire, and therefore the _init() method never gets invoked. I couldn't work out why this was the case, though.

What makes this whole thing even more bizarre, however, is if I visit my site http://www.obush.co.uk/jplayer/ in Firefox the playlist doesn't show and the files will not play. If however, I go to another page in the same tab (in this instance I was checking the audio files exist by going to http://www.obush.co.uk/jplayer/audio/Owens-Wonderful-Music.mp3) and then click the browser back button to go back to my demo page, the playlist then does load. Very odd.

Sorry to keep pestering you, I really do appreciate your help.


Owen

[ooobo]

Working fine in Firefox for me. Cache issue? Clear everything (and if you ever used cache.manifest, clear that too)

[Owen Bush]

Hey ooobo,

Thanks for the response. Unfortunately my caches have been cleared on several occasions. Also this is happening for me both at home and at work with both machines running FF 3.6.21 on Windows XP.


Owen

[Mark Panaghiston]

While my other PC turns on...

I took a look in Firefox 6 and it worked.

I looked at the source HTML. The DOCTYPE is missing. This can change the way the browser behaves. It would push IE9 into Quirks mode, which is a minefield of confusion... Since it assumes your page is ancient being that is does not have the DOCTYPE defined which is should have to conform with HTML 4.0.1 (I think that is the version defined in 1999 or so.)

OK... It did not work for me on Firefox 3.6.22 on Win 7.

I then figured I'd test the DOCTYPE hypothesis using the demos... And to my horror found that they had the same problem.
http://jplayer.org/latest/demo-01-supplied-mp3/

I obviously did not test that bit well enough... cross-browser and versions. This will also explain why others have had a similar problem.

It also effected the cut down version:
http://jplayer.org/latest/demo-01-supplied-mp3/?display=min
http://jplayer.org/2.1.0/jQuery.jPlayer.2.1.0.demos/demo-01-supplied-mp3-pf.htm

The problem is that Firefox 3.6.x does not appear to like the way the Flash is being inserted into the page. There were a number of changes to the way the Flash is inserted between 2.0.0 and 2.1.0. Among them being that the wmode is now opaque by default and not window... Coupled with the stuff required to have the flash in the page, but hidden, but not display:none.

Using FireBug, tweaking the jPlayer div to be 1 x 0 pixels was enough to cause the ready event to fire... And returning it to 0x0 again continues to work.

I will need to go away and review the sequence of the Flash instancing and when its and jPlayer's size is changed.

This appears to be a bug in jPlayer 2.1.0 with Firefox 3.6.x. Praise be the old browsers... Firefox 3.6 is the new IE6 :P

[Mark Panaghiston]

Reviewing the Flash sequence... The Flash is inserted at 1x1 size through attribute.
When the Flash's ready event occurs, the size is set to 0x0 using CSS. This looks correct.

The sequence for sizing the jPlayer div must be the culprit...

Yeah the jPlayer div gets set to 0x0 before the flash is even instanced... Will need to compare that with jPlayer 2.0.0...

Hmmm... jPlayer 2.0.0 did not set the size at all... It relied on the CSS to size the jPlayer element... And the Flash was set to 0x0 immediately, but I knew that bit had changed due to the wmode changes.

I investigated changing the size to 1x1px using the jPlayer options. This had no effect. I then changed the wmode to "window" and it started working.

For now use the option:
wmode: "window"

That should solve the problem for the time being... I will have to see how I will fix this in jPlayer... It is really a conflict of sorts between the default value. For video, we want to default to "opaque", for pure audio we want "window".

[Owen Bush]

Mark, thank you for your help. I will try setting wmode tonight when I get home - I'm not using the video player so wmode:'window' should be fine. I really appreciate your hard work and help, jPlayer is a great product and I'm looking forward to integrating it fully with my application.

[Scott Monaghan]

Hi Mark,  I'm having the same issue with Firefox 3.6.3 on win7.  The "ready" event never fires for me on this page: http://jplayer.org/latest/demo-01-supplied-mp3/ even though wmode is set to window.  Any more news on this bug?