AAC or MP3 Audio Embed
This article goes over the standard JW Player embedding practices for audio files. For more specific information on JW Player's audio playback capabilities, see our audio section in the Media Reference page.
The below JW Player embed is using an audio file with a minimum height of 40 pixels configured. The player will go into Audio Mode which will hide the player's video display, as well as other non-essential control bar items like fullscreen.
Although this example uses an AAC audio file (in MP4 container), MP3 audio is equally well supported across all desktop browsers (Chrome, Firefox, Internet Explorer, Safari) and mobile devices (iOS, Android). Other file formats (like Ogg Vorbis or Shoutcast) do not play everywhere, so you should stick to AAC or MP3. Please note that MP3 streaming via HLS manifest (m3u8) is not supported.
Above, we have embedded a JW Player to show its functions and appearance. However, to embed a player on your own web page, please see the following steps:
Step 1: Configuring your JW Player Library
JW Player offers two options for configuring your player's library on your web page:
Option A: Add a library to your <head>
In order to embed media with JW Player, you first have to add the player library to the head of your HTML page(or elsewhere above the actual embed). Player libraries are found in your embedding wizard and will set player defaults according to what is specified in the Wizard. A player's library will appear similarly to:
JW Player libraries are cloud-hosted by us, making them fast, reliable, secure, and always up-to-date with our latest releases. In addition, all configuration is performed with our easy-to-use graphical interface via our Dashboard.
Option B: Self-hosting
If you want to host your own player library, you can find both your license key and latest JW Player files in your dashboard's Advanced Account page. Once downloaded, you will need to host jwplayer.js on your own server. When configuring your web page, you will then need to point to your copy of jwplayer.js and also define your self-hosted license key. Here's a code example:
<script src="//mywebsite.com/jwplayer/jwplayer.js" ></script> <script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>
Step 2: Add the embed code to your <body>
With the player library set up, it's time to actually embed the video. You can insert this HTML in your page, at the exact location you want the video to appear:
Step 3: Configuration
In this above code, the <div> element is used as a container to load JW Player into, which must have a unique id attribute. The setup() block then refers to this ID. However, let's break down each of the configuration options to see what is being affected:
- file - Which video we'll be loading with JW Player
- width - The width of the video player in pixels
- height - The height of the player, also in pixels. Setting this to 40 or lower will put the player into Audio Mode.
The above configuration options are very basic, but there are many more available to customize JW Player to your liking.
Now that you have configured a basic player embed, you can start looking into adding further customizations. See the Customization section for more information.
If you are still having problems getting things to work, see our troubleshooting guide for a walkthrough of common embedding issues.
Did you find this article helpful?
Please log in to rate this article.