Make my own custom player skin work in PlayerDIY Web Player

To enable player users can customize web FLV player with their own custom player skin, PlayerDIY Web Player accepts player skin from its users.

Below is the tutorial to teach you how to make your player skin work in PlayerDIY Web Player, which assumes you already have designed a skin. For convenience, we assume the skin named playerskin.swf.

To make the skin showing in PlayerDIY Web Player and working with it, another two files playerskin.bmp and playerskin.xml are needed

1. Get a .bmp picture of the player skin
Print screen the skin and save it as playerskin.bmp. This picture will be displayed in the style list of PlayerDIY Web Player. Note: The size of the picture must be 220*36 pixel (W*H) and the red color is default as transparent color.

2. Make a configuration file
To make the skin work with PlayerDIY Web Player, you need to make a configuration file playerskin.xml. With the configuration file, you can control the skin in PlayerDIY Web Player, like “Hide Mute Button”, “Hide Stop Button”, “Hide Playing Process Bar”, etc.

It’s very simple to make a configuration file, here are two samples of it:

Sample 1:

<ControlConfig>
<group>Classical</group>
<allows>
<noMuteBtn>1</noMuteBtn>
<noStopBtn>1</noStopBtn>
<noProcBar>1</noProcBar>
<noVolumeBar>1</noVolumeBar>
<noTimeText>1</noTimeText>
<noFullScrBtn>1</noFullScrBtn>
<noPlayListBtn>1</noPlayListBtn>
<noWatchBtn>1</noWatchBtn>
<bigPlay>Media Player</bigPlay>
<!--playerOverMovie>1</playerOverMovie-->
</allows>
</ControlConfig>

If import the skin with this configuration into PlayerDIY Web Player, the “Options” panel of PlayerDIY Web Player will be like below:

Sample 2:

<ControlConfig>
<group>Others</group>
<allows>
<noMuteBtn>1</noMuteBtn>
<noStopBtn>0</noStopBtn>
<noProcBar>1</noProcBar>
<noVolumeBar>1</noVolumeBar>
<noTimeText>1</noTimeText>
<noFullScrBtn>1</noFullScrBtn>
<noPlayListBtn>1</noPlayListBtn>
<noWatchBtn>1</noWatchBtn>
<bigPlay>purple</bigPlay>
<!--playerOverMovie>1</playerOverMovie-->
</allows>
</ControlConfig>

If import the skin with this configuration into PlayerDIY Web Player, the “Options” panel of PlayerDIY Web Player will be like below:

Please note that when <noStopBtn>0</noStopBtn>, the option “Hide stop button” is gray and unavailable.

Tag Definitions:

<group>	Which group you want to place the skin in PlayerDIY Web Player. The group includes Classical, Transparent and others
<noMuteBtn>	Mute Button. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noStopBtn>	Stop Button. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noProcBar>	Playing Process Bar. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noVolumeBar>	Volume Adjustment Bar. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noTimeText>	Playing Time. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noFullScrBtn>	Full-Screen Button. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noPlayListBtn>	Previous and Next Button. 1 means they can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<noWatchBtn>	Playlist Button. 1 means it can be configured to be showed or hidden via PlayerDIY Web Player, 0 means can’t.
<bigPlay>	Which “Big Play Button” you want to use.

3. Import the skin into PlayerDIY Web Player.
To import the skin into PlayerDIY Web Player, you just need to copy and past the three files playerskin.swf, playerskin.xml, playerskin.bmp into a folder named “Control”.

There is a shortcut to find the “Control” folder: Click “Start” --> All programs --> PlayerDIY --> Web Player --> Right click “Web Player” --> Properties --> Click “Find Target…” button --> “Control” folder.

4. Restart PlayerDIY Web Player
Restart PlayerDIY Web Player, then you can find that the player skin playerskin in the style list on Template interface, and you can use it to customize video player for your web.