JPlayer working on Chrome and Safari, NOT working on FireFox

[mini :-)]

hi,

i have read through the recent comments posted in this group and did try and seek help in other relating comments but my thing still doesn't work on Firefox! (haven't tested IE's yet...) 

this is my code:

$("#jquery_jplayer_1").jPlayer({

ready: function () {

$(this).jPlayer("setMedia", {

mpeg: "pages/mp3/JAM.mpeg",

oga: "pages/mp3/JAM.ogg",

mp3: "pages/mp3/JAM.mp3"

}).jPlayer("play");

},

ended: function (event) {

$("#jquery_jplayer_2").jPlayer("play", 0);

},

swfPath: "js",

supplied: "mpeg, oga, mp3"

})

.bind($.jPlayer.event.play, function() { 

$(this).jPlayer("pauseOthers");

});

(initially it didn't work on Safari either until i added also the MP3 format version)

Please can somebody help me find whats wrong??

Thank you!

:-)

[Mark Panaghiston]

mpeg is not a valid format. jPlayer will just ignore it, but you should remove it.

I expect that Firefox does not work because the ogg mime type is wrong.
http://jplayer.org/latest/developer-guide/#jPlayer-server-response

Relative media urls are not recommended. If you used the m4v or m4a formats, the flash references them incorrectly.

[mini :-)]

Thanks for your reply, i removed the mpeg's and its fine.

but i dont understand the MIME type thing; i initially assumed (from reading the same document you added the link to) that the right type will be OGG but then i read in one of the other posts here that in order to have in work on Firefox it needs to be oga, so now im confused....

thanks, hope you can help. 

[Mark Panaghiston]

The format is OGG. jPlayer calls audio OGG files OGA. Video OGG files OGV. They are both OGG

The mime is "whogivesacrap/ogg"

I normally use "video/ogg" or "audio/ogg" but the ogg subtype is all that seems to matter. "application/ogg" was normal a few yesrs ago.

[mini :-)]

is this what you mean?

$("#jquery_jplayer_1").jPlayer({

ready: function () {

$(this).jPlayer("setMedia", {

audio/ogg: "pages/mp3/JAM.ogg",

mp3: "pages/mp3/JAM.mp3"

}).jPlayer("play");

},

ended: function (event) {

$("#jquery_jplayer_2").jPlayer("play", 0);

},

swfPath: "js",

supplied: " ogg, mp3"

})

.bind($.jPlayer.event.play, function() { 

$(this).jPlayer("pauseOthers");

});

it gets highlighted as an error and doesnt work on chrome, safari or firefox.....

sorry if im bothering you... but i cant figure it out

Thanks,

Rhianne

[Mark Panaghiston]

No. You have the wrong end of the stick.

The 2 lines that need changing back to what you had originally are:

oga: "pages/mp3/JAM.ogg",

supplied: " oga, mp3"

The MIME type is the content type given in the server response when a browser makes a request. For a HTML webpage, this is usually "text/html". A GIF image is "image/gif". The mime type is important and is the reason why when you access a GIF file directly, the browser knows it is a GIF image. Likewise for many other file formats the mime is important, like PDF to open the Adobe reader in the browser.

So your server, where your files are hosted on your domain, must get the MIME type correct for the OGG file.

The link I gave before that gives details on the mime types has commands suitable for Apache servers:
http://jplayer.org/latest/developer-guide/#jPlayer-server-response

You can test the MIME of server responses using a browser's developer tools. In Firefox, use FireBug. Other browsers have them built in now and I find Chrome and Opera dev tools nice too. Safari too, but as I use windows, I do not use that for dev. Normally I use FireBug because it has been around so long I'm used to it.

So in FireBug, which is an Add-on to the browser, you open it and select the net tab. The first time you have to enable the tab. Then reload the page and you get loads of details about every single request the browser made to the server. You can then click on a request and it gives details of the request... And it says "Content Type: audio/ogg" if the mime type is correct for the OGG URLs.

If you had given me a url to your project I could have checked it under about 10 seconds. So it is easy, once you are used to the tools.

Let us know whether the MIME type of thee ogg turned out to be correct or not.

Mark P.

ps. There is an more woolly alternative. Visit the OGG url directly in Firefox and if the mime type is correct, it will play in the browser using the native controls. Oh and the native controls, does not mean the QuickTime plugin, which Firefox would use if you visited the MP3 directly, assuming its MIME type is correct.

[Chris Marshall]

Hi Mark and folks...

http://www.rhythmshop.com/TEST3music_library.html

Eek! What am I doing wrong? The music's playing on three browsers (on the Mac anyway) but:

1) Got this massive white gap under the player and above the tracklist!

2) Need to have a bunny preview to start me off (ahem) as without a movie at the beginning, the images don't show at all....

3) Only still images on this page, but want to mix media later.....If it's the same image

on consecutive tracks, the jpg won't reload...

4) How do I centre it? Is it best to just stick the player in a table?

Please have a very brief look at the code and point me in the right direction could you or someone?

Cheers from London

Chris M

----------------------------------------------------------------

RPL rhythmshop productions ltd 

still turning your number twos into number ones

www.rhythmshop.com

chris marshall

rpl recordings 

35 Edithna Street

London SW9 9JR

England, UK

020-7326-1329 (tel/fax)

07956-584383

[Mark Panaghiston]

jPlayer has different defaults for audio and video. This is determined from the supplied formats. Only audio formats, then the size is zero. Video or both, then the size is 480x270.

The notes are added to the current docs:
http://jplayer.org/latest/developer-guide/#jPlayer-option-size

Now you mention it... I think there might be a bug on OSX Safari where the image does not get displayed again. So few people use the audio poster image, that it may well still be an issue that has been overlooked.

As for the big gap. There is a CSS issue somewhere. Can't find it myself... But if you remove that text under the playlist, then it gets even bigger.

[Chris Marshall]

Genius matey (as ever)

jPlayer has different defaults for audio and video. This is determined from the supplied formats. Only audio formats, then the size is zero. Video or both, then the size is 480x270.

The notes are added to the current docs:
http://jplayer.org/latest/developer-guide/#jPlayer-option-size

Gotcha

Now you mention it... I think there might be a bug on OSX Safari where the image does not get displayed again. So few people use the audio poster image, that it may well still be an issue that has been overlooked.

workaround different image names for each file!

As for the big gap. There is a CSS issue somewhere. Can't find it myself... But if you remove that text under the playlist, then it gets even bigger.

Dead right...am having a fiddle with my page css

Thanks very much...tho without changing the skin css, is the easiest way to alter the player's position to enclose it in a table?

Thanks

C

[Chris Marshall]

Finally (for the moment!)

http://www.c4327324.myzen.co.uk/TEST3radmusic_library.html

Getting there, will be just great (with my own skin maybe) ...just wondering, does a mixed media list like this need a video file at the top? If I remove the bunny video, get no poster image...

People doing playlists with jplayer seem to use cssSelector is it plus use the 1.4 js file not the 1.6 file that 'm using...is this correct???

thoughts?

Thanks hugely

Chris

As for the big gap. There is a CSS issue somewhere. Can't find it myself... But if you remove that text under the playlist, then it gets even bigger.

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/VfWIodOJX_gJ.
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.

[Mark Panaghiston]

After looking at your page structure, I noticed that the controls were aligned below the area for the menu on the left. Using FireBug, I turned off this rule here to make it align correctly.

~line 93 of jplayer.blue.monday.css

div.jp-controls-holder {
 clear:both;
}

I would need to review to see if this rule should be removed from the CSS. It appears to be an obsolete rule that got left in and does nothing, apart from in cases like yours.

[Chris Marshall]

Mark...was that aimed at me? http://www.rhythmshop.com/TEST3radmusic_library.html

Changing the blue.monday css to the above breaks the controls part on Safari OS X! I'm sort of fine as it was actually except wonder why I need the first in the media list to be a movie file (bunny, at the mo) if I want later poster frames to show on the mp3s?

[Chris Marshall]

Oh and how quaint..CONFIRMED the bug in Safari OS X re consecutive identical image poster files in the media playlist NOT loading tho no prob in every other browser! How silly....easy to workaround but really...

http://www.rhythmshop.com/TEST3radmusic_library.html

[Mark Panaghiston]

The problem with the OSX poster image does not make sense... The jPlayer code already checks that it has changed and either uses the new URL or shows the existing poster. I will need to look into that more later.

The video does not have to be first. I said about the size option. You would need to set the size to remove all videos from the list... Well from the supplied option. But you can have it 3rd or wherever.

I just did a test with my local version of 2.0.32 demo-02-media and swapped round the first 2 elements and the song played first with the poster displayed and then the video was 2nd.

[Mark Panaghiston]

@Chris: I was just taking a look at the audio poster image problem in OSX Safari 5.1 and the problem appears to have been fixed. I tested with a few different orders of media, audio first and video first and in different groupings, but it always worked.

Which version of OSX Safari were you using?

I do remember that this did happen. We had a report about it many months ago that I will try and dig out of the group posts after this reply. I'll also review the patch notes, as maybe I applied a fix but forgot... But not even sure if this applies in this case. ie., if you use 2.0.0

Looking at the code, for it to fail there would have had to be a JavaScript bug in the browser that did not like the !== comparison on 2 identical strings.

[Mark Panaghiston]

Looking at the code again... This line here compares the SRC of the image to the new string given in the setMedia object:

if(this.htmlElement.poster.src !== media.poster) {

So either the image SRC was being changed in some way, or the type of the SRC property was not a string, as either would break the strict !== comparison.

Hmmm... In my test, I am using absolute URLs. On your site you use relative URLs. Maybe that is important... As I pondered that the absolute URL that I used would not make sence to change, but a relative URL might be converted to absolute by the image SRC property's set function.

[Mark Panaghiston]

Bingo!

I used server relative URLs and OSX Safari 5.1 stopped working with the audio poster on consecutive identical poster image URLs.

While looking at the code earlier, I proposed a solution to myself... But it is flawed. I was going to compare the status.media.poster string... But it is already reset at that point in the code to "".

It should be easy to solve though. Just a little more clunky than I had hoped.

[Mark Panaghiston]

This has been fixed and will be included in the next development patch (2.0.33) when released.

Rough details...

At top of setMedia, a new var for:

var posterChanged = this.status.media.poster !== media.poster;

Further down setMedia, the comparison changed to:

if(posterChanged) {

From:

if(this.htmlElement.poster.src !== media.poster) {

While reviewing the other code that deals with the poster, the outer else clause was found to be redundant and was removed. It hid the poster, which is already done by the internal _resetMedia() method performed at the start of setMedia.

[Mark Panaghiston]

jPlayer 2.0.33 release notes:
https://groups.google.com/d/msg/jplayer/rdWPvU4GpB8/7pvdGTEsPlUJ