Selecting files

Most of the work in the JScript code is to do with the WMP’s object hierarchy but some of the skin tags provide facilities that are either not in the object hierarchy or easier to use via tags. For example the <THEME> tag has an OpenDialog method that will show a File Open dialog box. Change the StartPlay JScript function to:

function StartPlay(){
 file=theme.openDialog( 
   'FILE_OPEN','FILES_ALL');
 player.URL=file;
}

Now when the skin is opened a dialog box appears which allows the user to pick the media file to play. At the moment the only options supported are FILE_OPEN and FILES_ALL.

Sliders

Although most of the controls in your skin can be defined using primary and mapping files the slider is an example of one that you have to program in XML. The basic idea is that you specify the size, position and a bitmap to act as the button the user drags and the WMP does the rest.

For example, if you add the following tag within the <VIEW> </VIEW> tag then you will have created a slider:

<SLIDER
 id = "myslider"
 top = "60"
 left = "40"
 height = "10"
 width = "180"
 min = "-128"
 max = "128"
 tooltip = "Brightness"
 thumbImage = "button.bmp"
 backgroundColor = "black"
 foregroundColor = "blue"
/>

Use Paint to create a small 20x20 pixel red blob to act as the slider button and save it in the same directory under the name “button.bmp”.

Most of the attributes used within this new tag should be either familiar or obvious. The only problem with this slider is that while the user can drag the position button – nothing happens.

The examples included in the SDK show how to update its position from data within the WMP but you can also use it to update settings within the player.

Video settings

One thing that you can do in a skin that you can’t do with the WMP ActiveX control is allow the user access to the video settings – brightness, contrast and saturation. The <VIDEOSETTINGS> tag has attributes that we can couple to a suitable slider, just like the one we prepared earlier. To see how this works simply add the following tag within the <VIEW></VIEW> tags:

<VIDEOSETTINGS id="MyVideo">
</VIDEOSETTINGS>

The id attribute allows us to reference the tag by name in JScript. Now we need to add an event handler to the JScript code:

function ChangeBright(){
 MyVideo.brightness=myslider.value;
}

This uses the id value of the <VIDEOSETTINGS>  and the <SLIDER> tag to identify the components we are referring to.

Finally we need to add assign this new function as the event handler for a Slider change value event. To do this add the line:

value_onchange="JScript: ChangeBright()"

to the end of the <SLIDER> tag. Now when you open the skin you will see not only a slider but when you move it the brightness of the video will change. (All of the above changes can be seen in skin6.wms in the zip stored in the CodeBin.

The slider changes the brightness

Killing the clutter

One of the problems with creating a skin is the number of files that go to make it up: a skin definition file, primary image, mapping, code and even more. Keeping track of them all can be difficult and how you distribute a finished skin?

The answer is that you can Zip all of the files together into a single compressed file with the extension .WMZ. Now when you open the file the WMP will unzip all of the files and run your skin as if you had provided all of the files separately. You can also add your finished skin to the directory

C:\Program Files\Windows Media Player\Skins.

and they will appear in the list when the user clicks “Skin Chooser”.

To access the code for this project, once you have registered, click on CodeBin.

<ASIN:0321649060>

<ASIN:6130099185>

<ASIN:0262013355>

<ASIN:1584505591>