C# 2008 Programmer's Reference

  //---the reflected video---
  obj1 = this.control.content.findName ('WindowsMedia_wmv1');
 },
 // Sample event handler
 handleMouseDown: function(sender, eventArgs) {
  // The following line of code shows how to find an element by name and call a method on it.
  // this.control.content.findName('Storyboard1').Begin();
 }
}
function MouseEnter(sender, eventArgs) {
 //---mute the reflected video---
 obj1.volume=0;
 //---play the 2 videos---
 obj.play();
 obj1.play();
}
function MouseLeave(sender, eventArgs) {
 //---pause the 2 videos---
 obj.pause();
 obj1.pause();
}
function MouseClick(sender, eventArgs) {
 //---stop the 2 videos---
 obj.stop();
 obj1.stop();
}

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

Press F5 to test the page. Both videos start to play when the mouse hovers over either of the two videos (see Figure 19-56).

Figure 19-56

Creating Your Own Media Player

The MediaElement element is a bare-bones control that simply plays back a media file — it does not have visual controls for you to pause or advance the media (although you can programmatically do that). In this section, you build a Silverlight application that resembles the YouTube player, allowing you to visually control the playback of the media as well as customize its look and feel. Figure 19-57 shows the end product.

Figure 19-57 

Creating the Project

Using Expression Blend 2, create a new Silverlight project and name it MediaPlayer.

Add a Windows Media file (.wmv) file to the project by right-clicking on the project name and selecting Add Existing Item. For this project, use the same file as in the previous example, WindowsMedia.wmv.

Designing the User Interface

The first step is to design the user interface of the media player. Figure 19-58 shows the various controls that you will add to the page. The outline is used to identify the major parts of the player.

Figure 19-58

Figure 19-59 shows the organization and hierarchy of the various controls. Those controls correspond to the controls listed in Figure 19-58.

Figure 19-59

The most delicate part of the media player is the slider used to indicate the progress of the media playback. As shown in Figure 19-60, the slider (canvasProgress) consists of two Rectangle elements and an Ellipse element. The first Rectangle element (rectProgressWell) represents the entire duration of the movie. This control also forms the path that the marker (ellMarker, an Ellipse element) slides on. The second Rectangle control (rectDownloadProgress) is used to indicate the percentage of the media downloaded from the remote server. The lower part of Figure 19-60 shows this control in action (partially filled).

Figure 19-60

Here's the complete XAML code for the media player:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='472' Height='376'
 Background='#FFD6D4C8' x:Name='Page'>
 <MediaElement
  x:Name='MediaElement1'
  Width='466' Height='340'
  Stretch='Fill'
  Canvas.Left='3' Canvas.Top='3'
  AutoPlay='false' Source='WindowsMedia.wmv'/>
 <Canvas
  Width='24' Height='24'
  Canvas.Left='5' Canvas.Top='348'
  x:Name='btnPlayPause'>
  <Canvas
   Width='24' Height='24'
   x:Name='canvasPlay'>
   <Rectangle
    Width='24' Height='24' Fill='#FFFFFFFF'
    Stroke='#FF000000'
    RadiusX='3' RadiusY='3'
    x:Name='RectPlay' StrokeThickness='2'/>
   <Polygon
    Points='8,5 8,19 18,13'
    StrokeThickness='5' Fill='Red'
    Width='24' Height='24'/>
  </Canvas>