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

Defining the Event Handlers
The DownloadProgressChanged event handler is fired continuously while the MediaElement control downloads the media from the remote server. In this event handler, you first obtain the progress value (from 0 to 1) and then display the downloaded percentage on the TextBlock control. In addition, you also adjust the width of the rectProgressWell control so that as the media is downloaded, its width will also be expanded.

//---fired while the movie is being downloaded---
function DownloadProgressChanged(sender, eventArgs)
{
   //---get the progress value from 0 to 1---
   var progress = MediaElement1.DownloadProgress;

   //---display the download in percentage---
   textblock.Text = Math.round(progress*100).toString() + "%";

   //---adjust the width of the progress bar---
   var progressWidth = progress * rectProgressWell.width;
   rectDownloadProgress.width = Math.round(progressWidth);
}

The EllMarkerDown event handler is fired when the user clicks on the marker (the Ellipse control). Here, you set the markerClicked variable to true to indicate that the marker has been clicked:

//---marker is clicked---
function EllMarkerMouseDown(sender, eventArgs)
{
    markerClicked=true;
}

When the user releases the mouse button, it fires the EllMarkerMouseUp event handler. Here, you first need to check if the user releases the button on the main canvas itself, or on the marker. If the marker was previously clicked, you now need to move the marker to the current location of the mouse and set the media to the new position. The new position of the movie is determined by multiplying the duration of the media and the ratio of the position of the marker with respect to the width of the progress well (Listing 5).

The MediaPlayerMouseMove event handler is fired continuously when the mouse moves over the page. You need to determine if the marker is clicked when the mouse is moving. If it is, that means that the user is moving the marker. In this case, you need to reposition the marker (Listing 6).

The MediaPlayerMouseLeave event handler is fired when the mouse leaves the Silverlight page. In this case, you will set the markerClicked variable to false:

//---mouse leaves the entire Silverlight media player control
function MediaPlayerMouseLeave(sender, eventArgs)
{
    markerClicked=false;
}

The MediaEnded event handler is fired when the media has finished playing. In this case, you have to make the Play button visible again and hide the Pause button. In addition, you have to move the marker to the beginning and reset the media to the beginning:

//---movie has finished playing---
function MediaEnded(sender, eventArgs)
{
    var btnPlay = sender.findName("canvasPlay");
    var btnPause = sender.findName("canvasPause");

    playing = false;
    clearInterval(intervalID);    //---clear the progress updating---
    btnPlay.opacity = 1;          //---show the Play button---
    btnPause.opacity = 0;         //---hide the Pause button---

    //---move the marker to the beginning---
    ellMarker["Canvas.Left"] = -2;
    MediaElement1.Position="00:00:00"; //---reset the movie position---
}

The PlayPauseButtonUp button is fired when the user clicks on the Play/Pause buttons and releases the mouse. When the media has started playing, you use the setInterval() JavaScript function to display the media progress every half second:

Figure 3. Picture This: The functional media player.

function PlayPauseButtonUp(sender, eventArgs)
{  
   var btnPlay = sender.findName("canvasPlay");
   var btnPause = sender.findName("canvasPause");

   //---if currently playing and now going to pause---
   if (playing==true) {   
      MediaElement1.pause();      //---pause the movie---
      clearInterval(intervalID);  //---stop updating the marker---
      playing = false;
      btnPlay.opacity = 1;        //---show the Play button---
      btnPause.opacity = 0;       //---hide the Pause button---
   } 
   else
   {
      MediaElement1.play();       //---play the movie---
      playing = true;
      btnPlay.opacity = 0;        //---hide the Play button---
      btnPause.opacity = 1;       //---show the Pause button---

      //---update the progress of the movie---
      intervalID = window.setInterval("DisplayCurrentPlayBack()", 500);
   }
}

That's it! Press F5 in Expression Blend 2 and you should now be able to use the new media player (see Figure 3)!

Previous Page