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


Untapped Silverlight Powers: Create Your Own Media Player : Page 2

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

Wiring Up All the Controls
With the UI created and ready for coding, it's now time to wire up all the controls so that they will function as one. First, define the following events handlers:
  • DownloadProgressChanged(): Should be invoked continuously when the MediaElement control downloads the media from the remote server. It's used to update the red progress bar, which indicates the progress of the download.
  • EllMarkerMouseDown(): Invoked when the user clicks on the marker using the left mouse button.
  • EllMarkerMouseUp(): Invoked when the user releases the left mouse button.
  • MediaPlayerMouseMove(): Invoked when the mouse moves across the Silverlight page.
  • MediaPlayerMouseLeave(): Invoked when the mouse leaves the Silverlight page.
  • MediaEnded(): Invoked when the media has finished playing. The media will be reset to its starting position (so is the marker).
  • PlayPauseButtonUp(): Invoked when the user clicks on the Play/Pause button.
Now, assign the various event handlers to the various controls as shown in Listing 2.

After the event handlers are assigned, it's time to define the event handlers themselves. Double-click on the Page.xaml.js file located under the Page.xaml item in the Project window.

First, declare the following global variables at the top of the Page.xaml.js file:

//---global variables---
var playing = false;
var markerClicked = false;
var duration=0;
var intervalID;

//---all the major elements on the page---
var ellMarker;
var MediaElement1;
var textblock;
var rectProgressWell;
var rectDownloadProgress;
When the page loads, get a reference to all the major controls on the page (see Listing 3).

Before you define the various event handlers, you need to define two helper functions: ConvertToTimeSpan() and DisplayCurrentPlayBack().

The ConvertToTimeSpan() function converts value in seconds to the TimeSpan format of hh:mm:ss. For example, 61 seconds converts to 00:01:01. You need this function because the MediaElement control's Position property only accepts values of type TimeSpan. The ConvertToTimeSpan() function is defined as shown in Listing 4.

The DisplayCurrentPlayBack() function is used to display the current status of the media playback. It displays the elapsed time versus the total time of the media. For example, if the media (total duration two minutes) is into its thirtieth second, then the DisplayCurrentPlayBack() function will display 00:00:30 / 00:02:00. In addition, the DisplayCurrentPlayBack() function is also responsible for synchronizing the marker as the media is played. To ensure that the status of the playback is updated constantly, call the DisplayCurrentPlayBack() function repeatedly using the setInterval() JavaScript function (more on this later). The DisplayCurrentPlayBack() function is defined as follows:

//---shows the current playback -- marker and position---
function DisplayCurrentPlayBack()
    //---find duration of movie---
    if (duration==0)
       duration = Math.round(MediaElement1.NaturalDuration.Seconds * 100) / 

    //---find current position---
    var position = MediaElement1.Position.Seconds;

    //---move the marker---
    ellMarker["Canvas.Left"] = Math.round((position / duration) * 

    //---format - elapsed time/total time---
    var str =  ConvertToTimeSpan(position) + "/" + 

    textblock.Text = str;

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