Skinning JW Player 5: Tips and Troubleshooting

Purpose

This guide provides reasons for why common problems arise with your JW Player Skin and supply recommendations on how to fix them.

Introduction

Look through our explanations for the most common problems below to debug your JW Player Skin. Should you search through the guide and fail to diagnose or solve your problem, please visit our support forum.

CONTENTS

• Debugging Behavior
• General Tips & Troubleshooting
• The ControlBar
• The Display
• The Playlist
• Known Issues

Debugging Behavior

The skin will cause the player to fail to load if:

• Skin XML is malformed
• A required element is missing from the XML

The player will log an error but continue to load if:

• An image fails to load (i.e. - isn't in its specified location)

The player will ignore the element and not log an error if:

• The element does not exist in the XML

General Tips & Troubleshooting

• XML and the JW Player are both case sensitive. Be sure your elements and file names are spelled correctly.
• If you aren't sure which component or element appearing, or breaking the JW Player, you can add them in one-by-one until you discover what's wrong:
  1. Verify that the path to your XML file is correct.
  2. Don't forget to make a backup copy of your XML file before making changes.
  3. Begin by removing all components in your XML file except the one you're currently working on.
  4. Then remove all elements inside the component except the mandatory elements:
     capRight, capLeft & volumeSliderRail.
  5. Add in each element methodically until you discover what's not working.
• 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)
• The margin setting only applies when the controlbar.position FlashVar is set to "over" or when the JW Player is in full-screen mode.

The ControlBar

• Required elements: capRight, capLeft & volumeSliderRail.
• The time codes on each side of the timeSlider will position themselves vertically in the middle of the player, whose height is determined by the ControlBar's tallest element.

The Display

• When buffering, the JW Player will rotate your bufferIcon element. It is recommended to give the element square dimensions for smooth rotation.
• The JW Player will rotate the bufferIcon element in 15 degree increments.

The Playlist

• The color you use for the time codes on the ControlBar will be the same color in the Playlist.
• Items on the playlist will be as tall as your item & itemOver elements. (minimum: 20 pixels)
• You can make the sliderThumb element wider than the sliderRail element, and vice-versa.

Known Issues

• At times the bufferIcon may appear off-center over the Display Component background.
• Clicking the volumeSlider when the player is muted will not unmute the player.
• Skin will fail if capRight, capLeft & volumeSliderRail are not in the XML file.

Related Documents: Skinning the JW Player 5