Using JW Player Skins
JW Player skins change the outward appearance of the player, making it easy to personalize the appearance of the player to match your site's aesthetic. There are two types of skins available:
- XML/PNG skins: These skins consist of an XML file which contains settings and a bunch of PNG images. The files can be packed up in a zip, which improves the time it takes for them to load over the network. Building your own skin is extremely easy and can be done with any basic image and text editor. See Creating Skins for JW Player 5 for more info.
- SWF skins (deprecated): These skins consist of a single swf file, built using Adobe Flash. This type of skins has been supported since the 4.0 player. Since swf skins can only be built using Flash (a $500+ package) and since this skinning model can easily break, swf skins are considered deprecated in favor of PNG skins.
Our AddOns repository contains a list of all available skins.
Installing a Skin
Unlike plugins, LongTail doesn't host skins. This means that you'll have to download the desired skin and place the files in a publicly accessible directory on your own server.
Skins are distributed as zip files. This makes them fast to load in Flash mode, but zips cannot be loaded in HTML5 mode. For compatibility in both modes, you'll need to extract the contents of the zip, and then place both the zip and the contents in the same directory on your web server. For example, the folder containing the Stormtrooper skin would look something like this:
- /skins/stormtrooper/stormtrooper.zip (for Flash)
- /skins/stormtrooper/stormtrooper.xml (for HTML5)
- /skins/stormtrooper/controlbar
- /skins/stormtrooper/display
- /skins/stormtrooper/dock
- /skins/stormtrooper/playlist
Note - If your JW Player will be displayed domains other than the one with your skin (think: re-embeds), you'll want to make sure to have the proper cross-domain security policy files in place. See our guide to Crossdomain File Loading Restrictions for more information on how to create and publish the necessary files.
Configure the Player to Use a Skin
Once you've uploaded your skin, simply set the skin configuration property to the path where you uploaded the skin .swf or .zip file. This can be an absolute or relative path. Using the Stromtrooper skin from before, this would look like: