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

Customizing a Smaller JW8 Player for Audio

Hello,

I've been using JW Player 7 on my site for both audio and video files. For the audio files, I've set the player's "height" setting to 30. It looks like this: http://i.cubeupload.com/9aNtkT.png. After upgrading to JW Player 8, I'm not sure how to get the same result for audio. It seems that the "height" setting no longer works the same way and all of the audio players are quite large by default. I've tried making a few CSS customizations but haven't been especially successful. Here is where I'm currently at: http://i.cubeupload.com/0ZNOBV.png.

Ideally, I'd like the player to have a bit more "substance," like the version that I've been using for years with JW Player 7. If anyone could point me in the right direction to achieve this goal, it would be greatly appreciated!

Thank you,
JP

7 Community Answers

Up Down

Todd

JW Player Support Agent  
0 rated :

You should be able to set the height to 44 or less to get the same audio-only mode in JW8. Can you paste your code example here?

Up Down

JP

User  
0 rated :

Hi Todd,

Here's an example from one of my pages (with the specifics replaced):

<div id="container123">Loading the player...</div>
<script type="text/javascript">// <![CDATA[
jwplayer("container123").setup({
file: "/path/to/file.mp3",
width: "100%",
height: 30
});
// ]]></script>

Is it possible that something is overriding the audio-only mode for JW8?

Thank you,
JP

Up Down

Todd

JW Player Support Agent  
0 rated :

Hi JP,

Yes, I would expect that code to work, as the following code is working for me:

jwplayer('player1').setup({
    file: "tears.mp3",
    height: 44,
    width: "100%"
});

Please note that JW8 currently only has a volume toggle button, but no volume slider like JW7. This was a design choice to minimize clutter but the volume slider might be making a comeback in a future release.

Kind regards,
Todd

Up Down

JP

User  
0 rated :

Hi Todd,

Thanks for your reply. Unfortunately, after some further testing, I'm unable to confirm what you're suggesting. I've uploaded a "bare bones" test page as a demonstration of what I'm seeing: https://miracleshome.org/test.html

Although the player is set using "44" as the height, it still covers the entire screen. Here is the entire source code for the page:

<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="https://content.jwplatform.com/libraries/dAtvp6ZI.js" type="text/javascript"></script>
</head>
<div id="player1">Loading the player...</div>
<script type="text/javascript">
jwplayer('player1').setup({
file: "test.mp3",
height: 44,
width: "100%"
});
</script>
</body>
</html>

Am I missing something?

Thank you,
JP

Up Down

Todd

JW Player Support Agent  
0 rated :

Ah yes, I see it now. Thanks for the test page.

Your cloud-hosted library is setting a value for aspectratio by default, so you need to override it in your setup() call:

<script type="text/javascript">
jwplayer('player1').setup({
    file: "https://miracleshome.org/test.mp3",
    height: 44,
    width: "100%",
    aspectratio: ""
});
</script>

That should do the trick for you now.

Up Down

JP

User  
0 rated :

Thanks Todd, that did indeed do the trick! :)

Up Down

Todd

JW Player Support Agent  
0 rated :

Glad to hear that worked. I will mark this support case as closed, but certainly contact us again if you have any other support questions or concerns.

This question has received the maximum number of answers.