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:
- Any graphic software like: - Photoshop, Coral Draw etc.
- Any text editor like:- Notepad
- Window Media Player 7 or above
Common Elements or Tags of (.wms) file
- THEME => this tag will declare that this is a skin file.
-
Common Attribute Id Title of skin. Id Author of skin. - 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 - EFFECTS =>It is used to show visualization.
-
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:
- Custom Button => To create custom button, in custom button user has to add action in onClick event
- BUTTON => To Create Custom Button
- 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
- Custom Button => To create custom button, in custom button user has to add action in onClick event
-
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:
- Custom Slider =>
- SLIDER => To Create custom Slider
To create custom slider. In custom slider user has to add action.
- Predefined Slider => In Predefined Slider a action is already associated with it.
- SEEKSLIDER => To seek position of media
- VOLUMESLIDER => To control volume.
- Custom Slider =>
-
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.
- Download sachin.zip
- Unzip sachin.zip
- After Unzipping you will get a file sachin.wmz rename it to sachin.zip
- Unzip sachin.zip
- Now you will find following : - Graphics files, .js file and .wms file
- Now open .wms and .js file in any text editor and view code.