XMPP JavaScript Library

Window Media Player Skin creation Guide

Windows, Sachin Puri, 2010-04-25 22:03:17

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:
    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. To create custom slider. In custom slider user has to add action.
    3. 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.

  1. Download sachin.zip
  2. Unzip sachin.zip
  3. After Unzipping you will get a file sachin.wmz rename it to sachin.zip
  4. Unzip sachin.zip
  5. Now you will find following : -  Graphics files, .js file and .wms file
  6. Now open .wms and .js file in any text editor and view code.
Download
Download Code
Note: You can view code of any WMP skin by renaming .wmz to .zip and then unzip it and open .js file and .wms file in any text editor.
Add Your Comment
   
    Yes! I want to receive all comments by email

  by shikha kuntal on 04-Jun-2009 03:33 pm
too good!!!looking forward for more...
  • Reply
  •  1 Like
  •  1 Dislike
  • Report
  by manoj singh on 04-Jun-2009 03:29 pm
good work........
  • Reply
  •  1 Like
  •  1 Dislike
  • Report
  by Manoj Prabhakar on 25-May-2009 04:52 pm
Good Article
  • Reply
  •  1 Like
  •  1 Dislike
  • Report