HTML5 Audio & Video for jQuery
Step 4 : Upload the jPlayer skin
Perform the following actions:
- Download the jPlayer skin from the download page.
- Unzip the ZIP to get your skin files.
- Upload the jPlayer CSS file and image files to your web server.
For the purpose of this guide, upload them to a directory called "skin" located at the root of your domain.
This will allow you to easily reference the jPlayer skin from anywhere on your site using:
/skin/jplayer.blue.monday.css
Notes:
The skins tend to be dependant on their jPlayer release, with changes to the skin occurring between releases to take advantage of new features. Make sure you download the skin for the correct version of jPlayer.
The jPlayer skin is a good starting point for creating your own custom look that fits your site.
We wrote a blog post (Spreading Love and the Load with HTML5) that uses an HTML5 canvas to change the skin's sprites image, creating a simple jPlayer Skinner. It works in HTML5 browsers and it could use some love... To enable changing the values multiple times without having to reload the page, which is what I just noticed in Firefox 3.6.
Prior to jPlayer 2.0.0 we did not publish the skins in a ZIP file and you had to get them manually direct from the site directory: /release/skin/
For example, /1.2.0/skin/
While writing this guide I decided that we should make it easier to obtain the skin.