Building JW Player Skins

This article explains how to design and package a skin for JW Player 6. If you are looking for information on how to get and install existing skins, see Using JW Player Skins.

Introduction

JW Player skins change the appearance of the player. No coding skills are required to build a skin, but proficiency with a graphics editor is (e.g. Photoshop or Illustrator).

Technically, a JW Player skin consists of an XML file that contains a number of settings (e.g. the fontColor) and a number of links to JPG or PNG images (e.g. for the playButton). These settings and elements are grouped into 5 components: Controlbar, Display, Dock, Playlist and Tooltip.

When a skin design is completed, the PNG images can be inlined into the XML file for faster loading. This is done by replacing the relative URLs to the PNG images with a base64 encoded version of the images. This technique is widely used for CSS style sheets as well.

Build versus Modify

This guide and the accompanying Skin XML Reference contain all info you need to design and package a JW Player skin from scratch. However, an existing skin may already satisfy 90% of your requirements. In that case, we recommend you simply modify an existing skin instead of building one from scratch:

  • Attached to this article is our skinning SDK, which includes a test page and two skins (Five and Six) as a starting point.
  • The Pro, Premium and Ads editions of JW Player include 8 skins, which can be modified at will, after purchasing a license.

Editing an existing skin also allows you to become proficient with the JW Player skinning model while avoiding novice mistakes that may be hard to debug.

The Skin XML

The skin XML document contains all the settings and all the (links to) images for your skin. The XML file is easy to create and edit with any text or HTML editor. Here is its overall structure:

<skin target='6.0' name='SkinName' author='skinAuthor'>
   <components>
      <component name='controlbar'>
         <settings>
            <setting name='...' value='...' />
            ...
         </settings>
         <elements>
            <element name='...' src='...' />
            ...
         </elements>
      </component>
      ...
   </components>
</skin>

The main element, <skin>, declares that this XML is a JW Player skin. The target attribute declares this skin works in JW Player 6.0 and up. This attribute is required for a skin to work in JW6! The additional name and author attributes are optional but useful metadata.

Inside the <skin> element, 5 <component> elements are placed, named controlbar, display, dock, playlist and tooltip. They correspond to the following visuals:

A diagram of all JW Player skinning components

Each <component> contains two lists: one with settings and one with elements:

  • A <setting> refers to a non-image skinning option. Each setting contains a name (e.g. "fontsize") and a value (e.g. "12"). If a setting is omitted, the player reverts to the default value for that setting.
  • An <element> contains the url to a PNG, JPG or GIF image. Each element contains a name (e.g. "playIcon") and a src (e.g. "playIcon.png"). If an element is omitted, it is simply not displayed. This enables you to omit e.g. certain buttons from the controlbar.

Image elements must be stored in sub-directories that are named after the components. If, for example, inside the display component, you have set an element's src to "playIcon.png", the player presumes this image is at the following location:

display/playIcon.png

A full list of all supported settings and elements for each component can be found in the separate Skin XML Reference.

Testing a Skin

Your XML document can simply be loaded into a JW Player 6 using the skin configuration option. The skinning SDK contains several helpful setups, but here is a basic one:

jwplayer("myElement").setup({
    file: "video.mp4",
    height: 360,
    skin: "myCoolSkin/myCoolSkin.xml",
    width: 640
});

Inside the myCoolSkin directory, you will have sub-directory containing all image assets. Make sure they all have the right name and read-all permissions:

myCoolSkin/controlbar/
myCoolSkin/display/
myCoolSkin/dock/
myCoolSkin/playlist/
myCoolSkin/tooltip/

Here's some additional hints for troubleshooting your skin-in-progress:

  • If your XML file is malformed or not at the correct location, JW Player 6 will display an error message.
  • XML and the JW Player 6 are both case sensitive. Be sure your elements and file names are spelled correctly.
  • If you are not sure which component or element is breaking your skin, you can add them in one-by-one until you discover what is wrong.
  • A good rule of thumb is to name the element filenames after the elements themselves (e.g.: the playButton element is mapped to playButton.png)

Packaging a Skin

When your skin is completed, it is possible to package it, so distributing and loading the skin is much faster. Packaging is done by replacing the relative links to the PNG images with a base64 encoded string of the PNG image.

Creating base64 images of a skin is not trivial, though tools are available to do this for you:

Please sign in to leave your feedback for this article.
Attachments

Still don't have JW Player? Get It Here