Note: this tutorial was for version 3.15 of JWPlayer. It is now up to v4.2. The customisation wizard may or may not work with v3.15. An older version of this post demonstrated the customisation by changing colors. However, that code no longer works and has been removed. Hopefully I will provide an updated tutorial soon.
While using someone else’s media player to stream mp3s hosted on your site can be fun (see the tutorials on how to use the Google Reader player and how to use the Yahoo media player), nothing quite beats the thrill of rolling your own media player and controlling it on your own server. Below are some simple steps anyone can take to use the free jwplayer from Jeroen Wijering.
JW FLV Media Player
The JW FLV Media Player is the brainchild of Jeroen Wijering. It is made with Adobe Flash technology and will play not only flv files but any other media format supported by Flash, including our self-hosted mp3. You can get the jw flv media player up and running with a few simple steps:
- Download the source files for the media player from here
- Unzip the source files and upload them to your own hosted server. I created a new folder on my account called ‘mediaplayers’ and then created another folder called ‘jwplayer’. Take note of the location of the files as you will need this later.
- Go to the jw flv media player setup wizard
Configure the wizard as desired. I’ve included a screenshot of my wizard configuration and I’ve kept it very basic. The wizard lets you do things such as change colour, size, add playlists (if you have those set up already), add a stop button – stacks of features all up. When you’re finished configuring, click the ‘Update and preview code’ button to see what your player will look like and the code you need to cut and paste into your own site.As a quick explanation, the ‘source’ option is where you have uploaded the media player files on your server and the file option is where you have stored your mp3. Also, the ideal height for the slim player is 20 pixels (the default setting) for a single mp3. Larger sizes are useful for when you have a playlist of tracks you want to display.- Copy and past the code into your webpage. As an example, the code generated from my options is:
<embed src="http://techwhimsy.com/mediaplayers/jwplayer/mediaplayer.swf" width="440" height="20" allowscriptaccess="always" allowfullscreen="true" flashvars="height=20&width=440&file=http://techwhimsy.com/31_Ghosts_IV.mp3" />
Embedded, the final version looks like this:
And If you are having problems with the embed code (for example, the code shows up as standard text in your blog), try removing all the line returns and replacing them with a single space instead. Also, for some reason that escapes me (but you clever bunch out there probably know), you need to have a space between the end of the code and the closing “/>”.
