RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Untapped Silverlight Powers: Create Your Own Media Player

Learn how to build an application that reassembles the YouTube player, allowing you to visually control media playback.

My previous article on Silverlight demonstrated how to use the MediaElement control to playback media files. This bare-bones control simply plays back a media file—it does not have visual controls allowing you to pause or advance the media (although you can do this programmatically). This article will show you how to build a Silverlight application that reassembles the YouTube player, allowing you to visually control the playback of the media.

Designing the User Interface
Using Expression Blend 2, create a new Silverlight project and name it MediaPlayer. Add a Windows Media file (.wmv) file to the project; right-click on the project name and select Add Existing Item…. Name it WindowsMedia.wmv.

Figure 1 shows the organization and hierarchy of the various controls. Each of the control(s) outlined in red corresponds to the controls highlighted in Figure 2.

Figure 1. Major Components: The major components of the media player.
Figure 2. Major Components: The hierarchy of the controls.

The most delicate part of the media player is the slider, which is used to indicate the progress of the media playback. The slider (canvasProgress) consists of two Rectangle controls and an Ellipse control. The first Rectangle control (rectProgressWell) represents the entire duration of the movie. This control also forms the path that the marker (ellMarker, an Ellipse control) can slide on. The second Rectangle control (rectDownloadProgress) is used to indicate the percentage of the media downloaded from the remote server.

Listing 1 shows the full XAML code for the media player.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date