The JW Player 5 Beta is considered to be pre-release software.  The documentation below can (and will) change to reflect ongoing development.

Guide To Bitmap Skinning in JW Player 5

Overview

Before JW Player 5, it was only possible to build skins using Flash. Now, with the release of JW Player 5, designers can build skins in their graphical editor of choice, and save the visual elements as bitmaps. This allows for rapid prototyping without the need to compile a swf file, and opens up skinning to deesigners who don't have Flash experience or software.

Bitmap File Formats

JW Player 5 will accept most commonly used bitmap image formats including:

• JPG
• GIF Allows Transparency
• PNG (8-Bit) Allows Transparency
• PNG (24-Bit) Allows Transparency and Partial Transparency

Configuration

The XML Document

The XML Document holds all settings for your skin. It contains color settings for text and dock elements, margins and font-sizes for the controlbar, and paths to images for every element in the skin.

Anatomy of the JW Player Skin

A player skin consists of its own settings, and its components. To see a full example skin XML file, click here.

Basic XML Structure of a Skin

<?xml version="1.0"?>
<skin version="1.0" name="SkinName" author="http://www.yoursite.com/">
	<settings>
		<setting ... />
		<setting ... />
	</settings>
	<components>
		<component name="controlbar">
			<settings>
				<setting ... />
				<setting ... />
			</setting>
			<element ... />
			<element ... />
			<element ... />
		</component>
		<component name="display">
			<element ... />
			<element ... />
			<element ... />
		</component>
		<component name="dock">
			<element ... />
			<element ... />
			<element ... />
		</component>
		<component name="playlist">
			<element ... />
			<element ... />
			<element ... />
		</component>
	</components>
</skin>

Beginning Your XML Skin Document

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

<?xml version="1.0"?>
<skin version="1.0" 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" slot.

Skin Settings

The settings section of the Skin defines the color of the text in your Controlbar.

<settings>
	<setting name="backcolor" value="0x000000" />
	<setting name="frontcolor" value="0x000000" />
	<setting name="lightcolor" value="0x000000" />
	<setting name="screencolor" value="0x000000" />
</settings>

• backcolor
  the color used on overlay elements for Dock items
• frontcolor
  the color of the ProgressBar's time codes
• lightcolor
• screencolor
  the color behind the video

Color values are defined in a hexidecimal value for the color, just like in HTML/CSS. So, for instance, to make a color red in HTML, you would give it the value #FF0000. In this XML document you will give it the value 0xFF0000.

XML and 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.

Components

Each component is a child of the <components> element. The four default different components for a JW Player 5 skin are:

• controlbar
• display
• dock
• playlist

The ControlBar

The ControlBar Component is the most-used part of any JW Player skin. It controls video playback, shows you where you are in the video, toggles to fullscreen and allows you to control the volume. All PNG files must reside in your skin's controlbar subdirectory to function correctly.

ControlBar XML Syntax

<component name="controlbar">
   <settings>
        <setting name="margin" value="50" />
        <setting name="fontsize" value="10" />
   </settings>
   <elements>
        <element name="background" src="file.png" />
	<element name="capLeft" src="file.png" />
	<element name="capRight" src="file.png" />
	<element name="shade" 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

Settings for the ControlBar Component:

• margin
  This is the margin around which the control bar will sit when the player is fullscreen mode. The value is in pixels.
• fontsize
  This is the font size (in pixels) of the text in the ControlBar. JW Player 5 uses the font Arial. Its color is can be set with the frontcolor element in the skin settings.

The Background Element

Background is a graphic which stretches horizontally to fit the width of the ControlBar.

ControlBar Elements

Element Order

• capLeft
• playButton/pauseButton
• prevButton
• nextButton
• stopButton
• divider
• timeSliderRail
• timeSliderBuffer
• timeSliderProgress
• timeSliderThumb
• divider reused element
• blankButton
• divider reused element
• fullscreenButton/normalscreenButton
• divider reused element
• muteButton/unmuteButton
• volumeSliderRail
• volumeSliderBuffer
• volumeSliderProgress
• capRight

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 (this same element appears three times)
  A separator element between buttons and sliders.

Buttons

Buttons have two states. They are the button and buttonOver (mouseover) state -- which should have the same dimensions -- and add an element of interactivity to your skin.

Button element states 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.

The the button pairings are:

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

The TimeSlider

The timeSlider element is a unique element which is really four elements stacked on top of each other. Of the four 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

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. ../Sites/sandbox/astaire/bill/bill.xml The last element, timeSliderThumb is simply a graphic serving as the handle which you can drag across the progress bar to play at any certain time.

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.

BlankButton

The BlankButton is an extra button used by various plugins. With this there is no "foreground" element (and you shouldn't design one), it is only a background version (and "Over" state) for any extraneous buttons that appear via plugins.

Display Icons

Display Icons are simply the buttons you see in the middle of the player. You see the "Play" icon before the movie is playing, and also when you pause. When you've muted your video the "Mute" icon appears. Display Icons come in two parts: a global background element to every icon, and the icon itself, which is programmatically centered over the background layer. All images must reside in the display subdirectory of the skin.

Note: The bufferIcon will rotate clockwise while buffering.

Display XML Syntax

<component name="display">
	<elements>
		<element name="background" src="file.png" />
		<element name="playIcon" src="file.png" />
		<element name="muteIcon" src="file.png" />
		<element name="bufferIcon" src="file.png" />
	</elements>
</component>

Dock Icons

Dock Icons elements sit at the top right corner of your player and can be both informative or functional. For instance, if you've installed the HD plugin, once you've toggled High Definition Playback to ON, a small HD Dock Icon will appear in top corner of your player, letting you know you're watching in HD. The Dock Icon only has one element:

• button
• buttonOver
  the button's mouseover state

Dock XML Syntax

<component name="dock">
	<elements>
		<element name="button" src="file.png" />
		<element name="buttonOver" src="file.png" />
	</elements>
</component>

Playlist

Playlist elements consist of two parts. Playlist Items, and the Playlist Slider. Item graphics scale horizontally and are behind the description/thumbnail of videos in your playlist. The slider is a vertical scrollbar rail and handle (thumb).

Playlist XML Syntax

<component name="playlist">
	<elements>
		<element name="item" src="file.png" />
		<element name="itemOver" src="file.png" />
		<element name="sliderRail" src="file.png" />
		<element name="sliderThumb" src="file.png" />
	</elements>
</component>

Installing a Skin Into Your Player

You must have the Skin unzipped into directory on your website, which can be accessible by the webpage. Then you can reference the Skin by its XML file, and other flashvars for extra customization. Flashvars you can use:

Flashvar: skin

In the following line, you will see the skin flashvar added to the player. In this case, it is looking for the skin.xml file in the exampleskin subdirectory:

so.addParam('flashvars','skin=path/to/exampleskin/skin.xml');

Flashvar: dock

To enable the dock, you can add the Flashvar "dock" to your parameters. The default value is TRUE, and is unnecessary unless you'd like to turn it off:

so.addParam('flashvars','skin=path/to/exampleskin/skin.xml&dock=true');

Flashvar: controlbar.position

You can position the ControlBar in your player to either the TOP or BOTTOM of the player. Default value is BOTTOM.

so.addParam('flashvars','skin=path/to/exampleskin/skin.xml&controlbar.position=true');

Putting it all together

Here is an example of a complete JW Player 5 Embed with Skin, the Dock disabled and the ControlBar at the top.

<div id="videoDiv">this will be replaced by the JW Player.</div>
<script type="text/javascript">
  var so = new SWFObject('JWPlayer5.swf','mpl','800','400','9');
  so.addParam('flashvars','skin=exampleskin/skin.xml&dock=false&controlbar.position=top');
  so.addParam('allowfullscreen','true');
  so.write('videoDiv');
</script>

Example Skins

Download Example Skin: Beelden

• Download Example Skin Source (Files, XML, Photoshop Originals)