Window Media Player Skin creation Guide

This guide will tell you about how to create window media player skin. A common skin has following components:

.wms) File=>This file will contain XML like language.
(.js) File=> This will contain Java Script Code.
Images=> These images will be used for buttons, sliders and to show background of skin.

Software Requirement:

Common Elements or Tags of (.wms) file

VIEW => this tag specifies the view in which all the buttons, sliders will be added.

Common Attribute
width	'Width of skin'
height	'Height of skin
backgroundImage	'Image to be used for background of skin'
clippingColor	'Color which should become transparent in background image'
Title Bar	'it takes ‘false’ or ‘true’ values and it is used to show or hide title bar'
scriptFile	'it associates a Jscript (.js) file with a skin'

SUBVIEW =>a view can be divided into sub views, for example you can create a subview for controls, one for playlist, one for video, one for visualizations etc. you can hide or move subview as per your need.

Common Attribute
Id	It is used to uniquely identify a view.
backgroundImage	'Image to be used for background of SUBVIEW'
clippingColor	'Color which should become transparent in background image'
top	position of subview from top
left	position of subview from left

Common Attribute
Id	unique identifier
Width	“specify width of effect”
Height	“specify height of effect”
onClick	it will handle on click event. Hint: You can use onClick=”next():” to show next visualization.

BUTTON => To Create buttons which user can select to perform actions like Play, Pause, Stop, Next, Previous etc. There are Two Type of buttons:
1. Custom Button => To create custom button, in custom button user has to add action in onClick event
  - BUTTON => To Create Custom Button
2. Predefined Buttons => In predefined button default actions is already associated with buttons.
  - PLAYBUTTON => To Play
  - PAUSEBUTTON => To Pause
  - STOPBUTTON => To Stop
  - NEXTBUTTON => To play next Song
  - PREVBUTTON => To Play previous Song
  - MUTEBUTTON => To Mute or un-mute
  - FFWDBUTTON => To Fast Forward
  - REWBUTTON => To Rewind
  - CLOSEBUTTON => To close the player
  - MINIMIZEBUTTON => To minimize the player
  - RETURNBUTTON => To show full mode of media player

Common Attribute
id	It is used to uniquely identify a button.
top	position of button from top
left	position of button from left
image	Image to be used for button
hoverImage	Image to be used when mouse is moved on button
onClick	Event to occur on click Note: This function should only be used with custom button BUTTON don’t use it with predefined buttons. Like PLAYBUTTON, STOPBUTTON etc. because the already have actions associated with them.

SLIDER => Slider control is used for Seek bar and volume bar. There are Two Type of sliders:
1. Custom Slider =>
  - SLIDER => To Create custom Slider
2. Predefined Slider => In Predefined Slider a action is already associated with it.
  - SEEKSLIDER => To seek position of media
  - VOLUMESLIDER => To control volume.

Common Attribute
Id	It is used to uniquely identify a button.
Tooltip	To show tooltip.
backgroundImage	Image to be used for slider
thumbImage	Image to be used for slider thumb
min	0
max	Hint: use “wmpprop:player.currentmedia.duration” for seek bar and use 100 for volume bar.
value	“position of seek bar” Hint: “wmpprop:player.Controls.currentPosition” for seek bar and use “wmpprop:player.settings.volume” for volume bar.
width	width of slider.
top	position of button from top
left	position of button from left
onDragBegin	Action to perform when user start dragging thumbImage
onDragEnd	Action to perform when user stop dragging thumbImage
value_onchange	Action to perform when value is change

Steps to create skin

Step 1: Create Graphics
- Create Background Image
- Create Images for all the buttons like Play, Pause, Stop, Next, Previous, Mute etc.
- Create Image for Sliders
Step 2: Create Window Media Player File (.wms) and write code using text editor:
Step 3 Create a zip file of all graphics file, .js files and .wms file
Step 4 Rename the .zip file to .wmz
Step 5 Double click .wmz file to install skin

I am enclosing source code of a skin created by me download it and view code.