Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

JWPlayer 6 + Audio Only Skins + Firefox/Flash Support

I'm attempting to create a minimal "iTunes" like skin for playing / pausing MP3 files. Works great in every browser except Firefox - which falls back to Flash mode for MP3 audio. The skin is super minimal - just a play and pause button, embedded at 20px wide by 20px high:

Embed Code:
[code]
<script type="text/javascript">
jwplayer("audioPlayer").setup({
file: "{file:url}",
width: 20,
height: 20,
skin: "/fw/js/coaudio/coaudio.xml"
});
</script>
[/code]

Player Skin:
[code]
<skin target="6.0" name="CO Audio" author="Hybrid">

<components>
<component name="controlbar">
<settings>
<setting name="margin" value="0" />
</settings>

<elements>
<element name="playButton" src="play.png" />
<element name="pauseButton" src="pause.png" />
</elements>
</component>

</components>

</skin>
[/code]

Player in action:
http://cobirmingham.org/resources/media

Any ideas why the Flash version is cutting off the bottom of the buttons?

Thanks!

10 Community Answers

Up Down

JW Player

User  
0 rated :

Lets try that again:

Embed Code:
bc.. <script type="text/javascript">
jwplayer("audioPlayer-{entry_id}").setup({
file: "{file:url}",
width: 20,
height: 20,
skin: "/fw/js/coaudio/coaudio.xml"
});
</script>



Player Skin:
bc.. <skin target="6.0" name="CO Audio" author="Hybrid">

<components>
<component name="controlbar">
<settings>
<setting name="margin" value="0" />
</settings>

<elements>
<element name="playButton" src="play.png" />
<element name="pauseButton" src="pause.png" />
</elements>
</component>

</components>

</skin>


Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

It looks like the player here is now Vimeo?

Up Down

JW Player

User  
0 rated :

Look at the audio player listing below the Vimeo players. Thanks!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, didn’t even notice. I would make the player’s height larger. Although that is probably too small to embed our player at…

Up Down

JW Player

User  
0 rated :

In your documentation, you give an "audio" only example that is 30px height, I just copied the same height for my embed (tried both 20px and 30px). I think it may have something to do with the custom skin XML and flash, since it looks / works great in any browser using HTML5. http://www.longtailvideo.com/support/jw-player/29238/audio-only-controlbar This default example works great in Firefox / Flash - so I'm guessing it's possible.

As an experiment, I tried increasing the height, but the play button remains cut-off, and at a certain height, the center "display" component appears. I also tried increasing the width and had the same result.

Thanks again for your help!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Maybe it has to do with your custom skin then?

Up Down

JW Player

User  
0 rated :

Hey Ethan,

Just to follow up on this - if you look at my xml file for the skin (http://cobirmingham.org/fw/js/coaudio/coaudio.xml), you'll see that there is really nothing to it. The play button is simple as well: http://cobirmingham.org/fw/js/coaudio/controlbar/play.png I think if you try using the same basic skin XML I have above, and this play.png, you'd see that same Firefox issues I'm seeing.

I realize its not the most pressing issue - honeslty I hate Firefox these days for all is issues - but if you get a chance to check it out our client would certainly appriciate a fix.

Thanks again!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Ok, I think the issue here is that you need other elements in the skin, you can’t have them all missing except for the play icon.

Up Down

JW Player

User  
0 rated :

Finally figured out you need a background image for your controller bar to keep the height correct. Thanks!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

This question has received the maximum number of answers.