y previous article on getting started with Silverlight provided an overview of Silverlight in general and also covered how to execute managed code in a Silverlight 1.1 application. This article explores one of Silverlight’s key capabilities?rich media experience. To this end, you will learn how to embed a Windows media file in your Silverlight application and how to control its playback. In addition, you will also learn how to create simple effects on the video.

Creating the Silverlight Project
The first step is to create a Silverlight project. Using the Microsoft Expression Blend 2 September Preview, name the project Media (see Figure 1). Switch to the XAML view of the page and add a Canvas object to the page, like this:

Figure 1. New Project: Create a new project using Expression Blend 2 September Preview.

You will use this Canvas object to hold a Windows Media file.

In the Project window, right click on the project name (Media) and select Add Existing Item?. Select a Windows Media file. In this case, you’d select a .wmv file named WindowsMedia.wmv. After this, the WindowsMedia.wmv file will be added to the project.

Double-click the WindowsMedia.wmv file in the Project window to add it to the page.

Ensure that the WindowsMedia.wmv file is now contained within the Canvas object (see Figure 2). You might need to move the element into the element manually.

Figure 2. Adding the File: The .wmv file is now hosted within the Canvas object.	?	Figure 3. As the Video Plays: The media will by default automatically play when the page has finished loading.

Press F5 to test the page. You will notice that the video automatically starts to play when the page has finished loading (see Figure 3).

Disabling Autoplay
While automatically playing a video is a useful feature, sometimes you might want to disable the auto play default. For example, if you have multiple videos embedded in a page, this feature is actually more of a nuisance than anything. To disable the auto play feature, just set the AutoPlay attribute in the element to False, like this:

So how and when do you get it to play? You shall programmatically play the video when the user’s mouse enters the video and pause it when the mouse leaves the video. Also, if the user clicks on the video, the video shall stop and return to the beginning. To do so, set the following attributes highlighted in bold:

					MouseEnter="MouseEnter"               MouseLeave="MouseLeave"		   MouseLeftButtonDown="MouseClick"               Width="320" Height="240"                Source="WindowsMedia.wmv"                Stretch="Fill"/>	

Basically, you are setting the event handlers for the various events handled by the element. To write the event handler, go to the Project window and double-click on the Page.xaml.js file.

Append the Page.xaml.js file with the following code:

function MouseEnter (sender, eventArgs){     var obj = sender.findName("WindowsMedia_wmv");   obj.play();}function MouseLeave (sender, eventArgs){     var obj = sender.findName("WindowsMedia_wmv");   obj.pause();}function MouseClick (sender, eventArgs){     var obj = sender.findName("WindowsMedia_wmv");   obj.stop();}

The findName() method allows you to programmatically get a reference to the specified element (via its x:Name attribute) on the Silverlight page. In this case, you are referencing an instance of the MediaElement object. This object supports the play, pause, and stop properties.

Press F5 to test the application again. This time, you will notice that the video will start to play when the mouse hovers over the video and will pause when it leaves the video. To restart the video to the beginning, simply click on the video.

Creating the Mirror Effect
One interesting thing you can do with a video is to create a mirror effect. For example, Figure 4 shows a video playing with a mirror image at the bottom of it.

Figure 4. A Mirror Image: One interesting thing you can do with a video is to create a mirror effect.

To achieve the mirror image, first modify the original Canvas object by switching it to XAML view and adding the code in bold in Listing 1.

This will transform the video into the shape shown in Figure 5.

Next, add another element as shown in bold in Listing 2 to simulate the mirror effect.

You will now have two videos with the second video mirroring the first (see Figure 6).

To create the translucent effect for the mirror image, set the Opacity attribute to a value between 0 and 1:

Modify the following block of code in Page.xaml.js as shown in bold in Listing 3.

	?
Figure 5. A Mirror Image: The video with the transformation applied.	?	Figure 6. Two Videos: The page with two videos.

Notice that instead of programmatically finding the media object (using the findName() method) in each event handler, you can also locate them in the handleLoad() function. Also, as there are two identical videos in the page, you do not need the audio playback in the mirroring video. Hence, you turn off the volume by setting the volume property to 0 (the value is from 0 to 1).

Press F5 to test the page. You will see that both videos start to play when the mouse hovers over the top video.

Scratching the Surface
This article has only touched the surface of the facilities provided by the object in Silverlight. For a more in depth look at the media capabilities of Silverlight, check out the documentation here.