Skinning the JW Player 5

Basic XML Structure

<?xml version="1.0"?>
<skin version="1.1" name="SkinName" author="http://www.yoursite.com/">

   <components>
      <component name="controlbar">
         <settings>
            <setting name="..." value="..." />

         </setting>
         <layout>
            ...
         </layout>
         <element name="..." src="..." />

         <element name="..." src="..." />
         <element name="..." src="..." />

      </component>
      <component name="display">
         <settings>
            <setting name="..." value="..." />

         </setting>
         <element name="..." src="..." />
         <element name="..." src="..." />

         <element name="..." src="..." />
      </component>
      <component name="dock">

         <settings>
            <setting name="..." value="..." />
         </setting>

         <element name="..." src="..." />
         <element name="..." src="..." />

         <element name="..." src="..." />
      </component>
      <component name="playlist">

         <settings>
            <setting name="..." value="..." />
         </setting>

         <element name="..." src="..." />
         <element name="..." src="..." />

         <element name="..." src="..." />
      </component>
   </components>

</skin>

Beginning Your XML Skin

The opening declaration of your XML document declares that it IS an XML document, and establishes that this is a JW Player skin. Inside the skin element are two attributes: name and author.

<?xml version="1.0"?>
<skin version="1.1" name="SkinName" author="http://www.yoursite.com/">

You can replace these with your skin’s name and your website, or your own name if you’d prefer not to have your URL in the author attribute.

Linking to Images

Images must reside in a subdirectory corresponding to their parent container of the skin’s folder. For instance, Controlbar images should reside in the controlbar subdirectory.

Component sections

The player’s controls are broken into four components. Each of these is defined in a <component> tag, and are all placed inside of the skin’s <components> block. The player controls are:

• controlbar
• display
• dock
• playlist

In addition to player controls, it is also possible to define skinning elements for skinnable plugins as well. These would be placed in another <component> tag, with the name attribute corresponding to the id of the plugin.

Controlbar XML Syntax

<component name="controlbar">

   <settings>
      <setting name="backgroundcolor" value="0x000000"/>
      <setting name="margin" value="10" />

      <setting name="font" value="_sans" />
      <setting name="fontsize" value="10" />

      <setting name="fontcolor" value="0x000000" />
      <setting name="fontstyle" value="normal" />

      <setting name="fontweight" value="normal" />
      <setting name="buttoncolor" value="0xFFFFFF" />

   </settings>
   <layout>
      ...
   </layout>
   <elements>
      <element name="background" src="file.png" />

      <element name="capLeft" src="file.png" />
      <element name="capRight" src="file.png" />

      <element name="divider" src="file.png" />

      <element name="playButton" src="file.png" />

      <element name="playButtonOver" src="file.png" />
      <element name="pauseButton" src="file.png" />

      <element name="pauseButtonOver" src="file.png" />

      <element name="prevButton" src="file.png" />

      <element name="prevButtonOver" src="file.png" />
      <element name="nextButton" src="file.png" />

      <element name="nextButtonOver" src="file.png" />

      <element name="stopButton" src="file.png" />

      <element name="stopButtonOver" src="file.png" />

      <element name="timeSliderRail" src="file.png" />

      <element name="timeSliderBuffer" src="file.png" />
      <element name="timeSliderProgress" src="file.png" />

      <element name="timeSliderThumb" src="file.png" />

      <element name="fullscreenButton" src="file.png" />

      <element name="fullscreenButtonOver" src="file.png" />
      <element name="normalscreenButton" src="file.png" />

      <element name="normalscreenButtonOver" src="file.png" />

      <element name="muteButton" src="file.png" />

      <element name="muteButtonOver" src="file.png" />
      <element name="unmuteButton" src="file.png" />

      <element name="unmuteButtonOver" src="file.png" />

      <element name="volumeSliderRail" src="file.png" />

      <element name="volumeSliderBuffer" src="file.png" />
      <element name="volumeSliderProgress" src="file.png" />

      <element name="blankButton" src="file.png" />
      <element name="blankButtonOver" src="file.png" />

   </elements>
</component>

Controlbar Settings

In the example above, you will notice the bit of code containing the settings element for the Controlbar component. It looks like this:

<settings>
   <setting name="backgroundcolor" value="0x000000"/>

   <setting name="margin" value="10" />
   <setting name="font" value="_sans" />

   <setting name="fontsize" value="10" />
   <setting name="fontcolor" value="0x000000" />

   <setting name="fontstyle" value="normal" />
   <setting name="fontweight" value="normal" />

   <setting name="buttoncolor" value="0xFFFFFF" />
</settings>

Here is a list of the Controlbar settings, along with their default values:

backgroundcolor (undefined)

Color to display underneath the controlbar. If the controlbar elements are transparent or semi-transparent, this color will show beneath those elements. If this is not set, the Flash stage will be visible beneath the controlbar.

margin (0)

This is the margin which will wrap around the controlbar when the player is fullscreen mode, or when the player’s controlbar setting is set to over. The value is in pixels.

font (_sans)

The font face for the Controlbar’s text fields, elapsed and duration. (_sans, _serif, _typewriter)

fontsize (10)

The font size of the Controlbar’s text fields.

fontweight (normal)

The font weight for the Controlbar’s text fields. (normal, bold)

fontstyle (normal)

The font style for the Controlbar’s text fields. (normal, italic)

fontcolor (undefined)

The color for the Controlbar’s text fields.

buttoncolor (undefined)

The color for any custom Controlbar icons.

Controlbar Background

background is a graphic which stretches horizontally to fit the width of the Controlbar. capLeft and capRight are placed to the left and right of the background.

Caps and Dividers

The Controlbar has a few elements which allow you to add space between elements. They are non-functioning bitmaps meant to give space to the right and left edges of the Controlbar.

capLeft

The left cap graphic to your controlbar skin

capRight

The right cap graphic to your controlbar skin

divider

A separator element between buttons and sliders. (this same element can appear multiple times)

Buttons

Buttons have two states. The button state is visible when the mouse is not hovering over the button. The buttonOver state – which should have the same dimensions as button – is shown when the user hovers the mouse above the button.

The two states of the button elements are:

• playButton / playButtonOver
• pauseButton / pauseButtonOver
• prevButton / prevButtonOver
• nextButton / nextButtonOver
• stopButton / stopButtonOver
• fullscreenButton / fullscreenButtonOver
• normalscreenButton / normalscreenButtonOver
• muteButton / muteButtonOver
• unmuteButton / unmuteButtonOver
• blankButton / blankButtonOver

Toggle Buttons

Certain buttons replace each other depending on the state of the JW Player. For instance, when a video is playing, the playButton is replaced by the pauseButton element.

Toggle button pairs:

• playButton / pauseButton
• fullscreenButton / normalscreenButton
• muteButton / unmuteButton

The TimeSlider

The timeSlider element is a unique element which is really several elements stacked on top of each other. Of those elements, three of them automatically scale to a width based on the free space in the player. Those elements are:

timeSliderRail

the background graphic which serves as the frame for the timeSlider

timeSliderBuffer

the file’s buffer indicator

timeSliderProgress

the file’s progress indicator

Additional timeSlider elements:

timeSliderThumb

serves as a handle which can be dragged across the progress bar to allow the user to specify a seek position.

timeSliderCapLeft

Left-hand end-cap, placed to the left of the timeSliderRail element.

timeSliderCapRight

Right-hand end-cap, placed to the right of the timeSliderRail element.

With that in mind it is important to design your elements to gracefully scale horizontally. The timeSliderBuffer and timeSliderProgress elements dynamically scale to indicate a percentage of progress of the total file length.

The VolumeSlider

The volumeSlider element is quite similar to the timeSlider, except that it does not scale automatically. It will be as large as graphics you produce.

volumeSliderRail

the background graphic which serves as the frame for the volumeSlider

volumeSliderBuffer

this shows the potential volume the slider can have.

volumeSliderProgress

this is shows the current level at which the volumeSlider is set.

volumeSliderThumb

the handle to slide the volume, also indicates the volume level.

volumeSliderCapLeft

Left-hand end-cap, placed to the left of the volumeSliderRail element.

volumeSliderCapRight

Right-hand end-cap, placed to the right of the volumeSliderRail element.

the handle to slide the volume, also indicates the volume level.

Note: JW Player 5.1’s skinning model will add 5 pixels of padding to each side of the volumeSlider if no end-caps are specified. JW Player 5.1 and below will fail to load without the volumeSliderRail element in the XML file.

BlankButton

The blankButton element is used when plugins insert additional buttons into the Controlbar. This element should simply be a button background; the foreground element will be added by the plugins.

Text Fields

Two text fields can be laid out in the controlbar:

elapsed

Amount of time elapsed since the start of the video (format: mm:ss)

duration

Duration of the currently playing video (format: mm:ss)

Layout XML Syntax

Inside the controlbar’s <component> block, you can insert an optional <layout> block which allows you to override the default controlbar layout.

<layout>
   <group position="left">

      <button name="play" />
      <divider />
      <button name="prev" />

      <divider />
      <button name="next" />
      <divider />

      <button name="stop" />
      <divider />
      <text name="duration" />

      <divider />
   </group>
   <group position="center">
      <slider name="time" />

   </group>
   <group position="right">
      <text name="elapsed" />

      <divider />
      <button name="blank" />
      <divider />

      <button name="mute" />
      <slider name="volume" />
      <divider />

      <button name="fullscreen" />
   </group>
</layout>

Layout Groups

The Controlbar’s layout is made up of three groupings, left, right and center.

• Left:Elements placed in the <group position=”left”> tag will be placed left to right and be left-aligned.
• Center: Elements placed in the <group position=”center”> tag will be placed between the left and right groups. Furthermore, if the timeSlider element is placed here, it will be stretched to any space not assigned to other elements.
• Right: Elements placed in the <group position=”right”> tag will be placed left to right and be right-aligned.

Layout Elements

The <group> tag can contain the following elements:

<button name="..." />

Used to place the Controlbar button elements described above. For example, the play button would appear as <button name=”play” />

<text name="..." />

Used to place the Controlbar text elements, elapsed and duration.

<slider name="..." />

Used to place the Controlbar slider elements, timeSlider and volumeSlider.

<divider />

Used to place the divider element. This tag can define two optional attributes (only one attribute may be used at a time):

• element: Allows an arbitrary element to be placed between other elements. If no element or width attribute is set, the default divider graphic is used. Example:

<divider element="alternate_divider" />

• width: If this attribute is set, the specified number of pixels will be placed into the layout. No graphical element will be used; the controlbar’s background element will be visible. Example:

<divider width="10" />

Controlbar Composition

Display XML Syntax

<component name="display">
   <settings>
      <settings>
         <setting name="backgroundcolor" value="0x000000" />

         <setting name="bufferrotation" value="15" />
         <setting name="bufferinterval" value="100" />

      </settings>
   </settings>
   <elements>
      <element name="background" src="file.png" />

      <element name="playIcon" src="file.png" />
      <element name="playIconOver" src="file.png" />

      <element name="playIcon" src="file.png" />
      <element name="muteIconOver" src="file.png" />

      <element name="bufferIcon" src="file.png" />
   </elements>
</component>

Display Settings

Here is a list of Display settings, along with their default values:

backgroundcolor (0x000000)

This is the color of the player’s display window, which appears behind any playing media.

bufferrotation (15)

The number of degrees the buffer icon is rotated per rotation. A negative value will result in the buffer rotating counter-clockwise.

bufferinterval (100)

The amount of time, in milliseconds between each buffer icon rotation.

Display Elements

The following elements are available for the Display. All of the elements are optional, and will be excluded from the player if they are not

background

The background is a graphic which is placed behind the display icons, and is centered inside the Display.

playIcon

This element is displayed when the player is paused or idle.

playIconOver

This element replaces the playIcon element when the user hovers the mouse over it.

muteIcon

This element is displayed when the player is muted.

muteIconOver

This element replaces the muteIcon element when the user hovers the mouse over it.

bufferIcon

This element is displayed when the player is in a buffering state. If bufferIcon is a static image, it will be rotated around its center. If it is an animated SWF file, it will simply be placed in the center of the display.

Dock Settings

Here is a list of the settings that can be placed in the dock’s <settings> block, along with their default values:

fontcolor (0x000000)

The color for the Dock buttons’ text fields.

Playlist XML Syntax

<component name="playlist">

   <settings>
      <setting name="fontcolor" value="0x999999" />
      <setting name="overcolor" value="0xFFFFFF" />

      <setting name="activecolor" value="0x990000" />
      <setting name="backgroundcolor" value="0x000000"/>

      <setting name="font" value="_sans" />
      <setting name="fontsize" value="12" />

      <setting name="fontweight" value="normal" />
      <setting name="fontstyle" value="normal" />

   </settings>
   <elements>
      <element name="background" src="background.png" />

      <element name="item" src="item.png" />
      <element name="itemOver" src="itemOver.png" />

      <element name="itemActive" src="itemActive.png" />
      <element name="itemImage" src="itemImage.png" />

      <element name="sliderRail" src="sliderRail.png" />
      <element name="sliderThumb" src="sliderThumb.png" />

      <element name="sliderCapTop" src="sliderCapTop.png" />
      <element name="sliderCapBottom" src="sliderCapBottom.png" />

   </elements>
</component>

Playlist Settings

Here is a list of the settings that can be placed in the dock’s <settings> block, along with their default values:

fontcolor (undefined)

The color for the Dock buttons’ text fields.

overcolor (undefined)

The color for the Dock buttons’ text fields when the mouse is hovering over that item.

activecolor (undefined)

The color for the Dock buttons’ text fields when that item is the currently active item.

backgroundcolor (undefined)

The playlist’s background color.

font (_sans)

Font used for the playlist’s text fields (_sans, _serif, _typewriter)

fontsize (undefined)

Font size for the playlist’s text fields. By default, the playlist item’s title has a fontsize of 13 pixels; the rest of the fields are 11 pixels. If fontsize is set, all text fields will have the same font size.

fontstyle (normal)

Can be used to set the font style for the playlist’s text fields (normal, italic)

fontweight (normal)

Can be used to set the font weight for the playlist’s text fields (normal, bold)

Zip File Structure

The XML file should named the same as the skin itself. For example, a skin called myskin would contain an XML file called myskin.xml, and would be zipped into myskin.zip. All images belong in their corresponding folders and reside on the same level as the XML file.

• skin_name.xml
• controlbar (folder with images)
• display (folder with images)
• dock (folder with images)
• playlist (folder with images)

Once you have zipped everything up, using a skin is a matter of:

• Uploading the skin to your server
• Setting the skin option in your player’s embed code to the URL of the ZIP file.

Example Skins

A number of example skins can be freely downloaded from our addons repository. Feel free to tweak any of these skins to make them fit your site design.