Wei-Meng Lee - C# 2008 Programmer's Reference

//---move the marker---

ellMarker["Canvas.Left"] =

Math.round((position / duration) *

rectProgressWell.width);

//---format - elapsed time/total time---

var str = ConvertToTimeSpan(position) + "/" +

ConvertToTimeSpan(duration);

textblock.Text = str;

}

Finally you define the various event handlers.

The DownloadProgressChangedevent handler is continuously fired when the MediaElementcontrol is downloading 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 TextBlockcontrol. In addition, you adjust the width of the rectProgressWellcontrol so that as the media is downloaded, its width expands (see Figure 19-61). Here's the code:

//---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);

}

Figure 19-61

The EllMarkerDownevent handler is fired when the user clicks on the marker (the Ellipse element). Here, you set the markerClickedvariable 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, the EllMarkerMouseUpevent handler is fired. 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 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. Here's the code:

//---marker is released---

function EllMarkerMouseUp(sender, eventArgs) {

//---only execute this function if the user is moving the marker---

if (markerClicked) {

markerClicked=false;

//---find duration of movie---

duration =

Math.round(MediaElement1.NaturalDuration.Seconds * 100) / 100;

//---get the position of the marker w.r.t. to the Well---

position =

((ellMarker["Canvas.Left"]) / rectProgressWell.width) * duration;

//---get integer part---

position = Math.floor(position);

//---end of the media---

if (ellMarker["Canvas.Left"]==rectProgressWell.width) {

//---move the movie to the last frame---

MediaElement1.Position = ConvertToTimeSpan(duration);

} else {

//---move the movie to the new position---

MediaElement1.Position = ConvertToTimeSpan(position);

}

}

}

The MediaPlayerMouseMoveevent handler is continuously fired 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, and you need to reposition the marker. Here's the code:

//---mouse moves inside the Silverlight media player control---

function MediaPlayerMouseMove(sender, eventArgs) {

//---user clicks marker and drags it---

if (markerClicked) {

//---find duration of movie---

if (duration==0)

duration =

Math.round(MediaElement1.NaturalDuration.Seconds * 100) /

100;

clearlnterval(intervallD);

//---get the position of the mouse with respect to the progress Well---

var pt = eventArgs.getPosition(rectProgressWell);

//---marker not allowed to stray outside the well---

if (pt.x > 0 && pt.x < rectProgressWell.width) {

//---moves the marker---

ellMarker["Canvas.Left"] = pt.x;

//---display the new time---

textblock.Text =

ConvertToTimeSpan((pt.x / rectProgressWell.width) * duration).toString();

} else if (pt.x <= 0) //---move to the beginning---

{

//---moves the marker---

ellMarker["Canvas.Left"] = 0;

//---display the new time---

textblock.Text = "00:00:00";

} else if (pt.x >= rectProgressWell.width) //---move to the end---

{

//---moves the marker---

ellMarker["Canvas.Left"] = rectProgressWell.width;

//---display the new time---

textblock.Text = ConvertToTimeSpan(duration);

}

if (playing)

intervalID = window.setInterval("DisplayCurrentPlayBack()", 500)

}

}

The MediaPlayerMouseLeaveevent handler is fired when the mouse leaves the Silverlight page. In this case, you set the markerClickedvariable to false:

//---mouse leaves the entire Silverlight media player control

function MediaPlayerMouseLeave(sender, eventArgs) {

markerClicked=false;

}

The MediaEndedevent handler is fired when the media has finished playing. 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. Here's the code:

//---movie has finished playing---

function MediaEnded(sender, eventArgs) {

var btnPlay = sender.findName("canvasPlay");

var btnPause = sender.findName("canvasPause");

playing = false;

clearlnterval(intervallD); //---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 PlayPauseButtonUpbutton is fired when the user clicks on the Play/Pause button and releases the mouse. When the media has started playing, you use the setlnterval()JavaScript function to display the media progress every half second:

function PlayPauseButtonUp(sender, eventArgs) {

var btnPlay = sender.findName("canvasPlay");

var btnPause = sender.findName("canvasPause");