Creating a re-usable media player using silverlight controls. - Letz learn togather - Site Home

So, let’s quickly dive in and get started. Our objective here is to build a media player control which can be used to download streaming content and play the media while preserving the aspect ratio to respond to poor quality videos. Hope it will be fun.

Step 1: Getting Started

The media player is a complex control. It will in-turn host several other controls which will handle the basic functionality for the media player. In the course of this document, we will explore how to work with the following aspects of the media player:

1. Play

2. Pause

3. Stop

4. Forward

5. Backward

6. Mute

7. Status display

8. Aspect ratio preservation

9. Full screen

10. Timeline /Streaming

Step 1.0: creating the user interface.

The diagram above depicts the individual sections of the media player control. The hosting UI element contains three main regions, namely the media element, which hosts the streaming media, the controls sections at the bottom of the player and the download progress/ timeline control. A similar UI may be created using the Expressions Blend editor.

Step 1.1: Hooking up events

If we move to the code-behind file for the user control, it will have very little content. However, unlike other versions of Silverlight, now we can directly access the child elements of the user control from the code-behind and hook up events. We may add event handlers in the code or in XAML. Once we have placed a media element on the host UI, we can call the appropriate events for the media element on hitting one of our control panel elements.

We will start by hooking up the basic functionality after we have placed a media element control on the host UI.

Step 1.1.1: Handling Play

The following XAML snippet creates a play button on the host page:

The following code snippet adds a click event handler in the code behind:

this.BtnPlay.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnPlay_MouseLeftButtonDown);

The following code snippet triggers the media element’s event to play the media:

thePlayer.Play();

Step 1.1.2: Handling Pause

The following XAML snippet creates a pause button on the host page:

The following code snippet adds a click event handler in the code behind:

this.BtnPause.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnPause_MouseLeftButtonDown);

The following code snippet triggers the media element’s event to pause the media:

thePlayer.Pause();

Step 1.1.3: Handling Stop

The following XAML snippet creates a stop button on the host page:

The following code snippet adds a click event handler in the code behind:

this.BtnPause.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnStop_MouseLeftButtonDown);

The following code snippet triggers the media element’s event to stop the media:

thePlayer.Stop();

Step 1.1.4: Handling Forward

The following XAML snippet creates a forward button on the host page:

The following code snippet adds a click event handler in the code behind:

this.BtnFwd.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnFwd_MouseLeftButtonDown);

The following code snippet triggers the media element’s event to forward the media:

thePlayer.Position = // Desired position (forwards on the timeline) on forward click ;

Step 1.1.5: Handling Backward

The following XAML snippet creates a backward button on the host page:

The following code snippet adds a click event handler in the code behind:

this.BtnBwd.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnBwd_MouseLeftButtonDown);

The following code snippet triggers the media element’s event to reverse the media:

thePlayer.Position = // Desired position (backwards on the timeline) on forward click ;

Step 1.1.6: Handling Mute

The following XAML snippet creates a mute button on the host page:

The following code snippet adds a click event handler in the code behind:

this.BtnMute.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnMute_MouseLeftButtonDown);

The following code snippet triggers the media element’s event to mute the media:

thePlayer.IsMuted = true; //(To toggle back, set the property to false)

Step 1.1.7: Handling Status Display

To handle status of the media, we could use several approaches. I will depict it using a very simple method. We will have a storyboard with a time-line of a second. This is an empty storyboard, which will virtually server as our timer. We will hook up to the events of the story board and display the current media position in a label.

The following XAML snippet creates a storyboard on the host page:

The following code snippet adds a click event handler in the code behind:

this.Timer.Completed += new EventHandler(this.Timer_Completed);

The following code snippet triggers the storyboard’s event to display the media status:

this.statusText.Text = // Display text;

The following properties of the media element will be handy while seeking such display information:

thePlayer.Position

thePlayer.NaturalDuration

Step 1.1.8: Handling Aspect Ratio

To preserve the aspect ratio of a media, use the following properties of the media element:

thePlayer.Stretch = Stretch.None; // Doesn’t strech media, ideal for poor quality videos

thePlayer.Stretch = Stretch.Uniform; // Strtches the video preserving the aspect ratios

Step 1.1.9: Handling Full Screen

To take a media element into the full screen mode, we have to investigate the following properties of the host control element:

Application.Current.Host.Content.IsFullScreen = true;

Declare an event in the media player, raise the event on clicking the full-screen button and use the aforesaid code snippet in the event handler. Once in full screen mode, it will respond to the ‘Esc’ key to take you back to the normal mode.

Step 1.1.10: Handling Stream download/ Timeline

To handle a media element’s stream download, we have to investigate the following properties/ events:

this.thePlayer.DownloadProgressChanged += new RoutedEventHandler(this.ThePlayer_DownloadProgressChanged);

private void ThePlayer_DownloadProgressChanged(object sender, RoutedEventArgs e)

{

if (thePlayer.DownloadProgress <= 1) // Signifies incomplete download

{

// Do you custom task here, probably changing the gradient of the timeline UI element or the value of a slider element. This property may be appropriately data bound.

}

Step 2: Hosting the player

The media player can be hosted as a Silverlight control on any other Silverlight host control. The host control can hook up to and trigger events of the media player appropriately (especially the full screen and similar events. To use any Silverlight control on another host control, we may use the following syntax:

Include:

xmlns:mediaplayer="clr-namespace:MyNamespace;assembly=MyAssembly"

Create control using:

<mediaplayer:myplayer></mediaplayer:myplayer>

To conclude, its exciting that the rich media object model in Silverlight exposes so much for the developers to build on. The UI for the player might be customized completely using Expressions Blend. Hope this tutorial helped in explaing how easy it is to play with media controls in Silverlight.