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

MouseLeave="MediaPlayerMouseLeave"

MouseLeftButtonUp="EllMarkerMouseUp">

x:Name="MediaElement1"

Width="466" Height="340"

Stretch="Fill" Canvas.Left="3" Canvas.Top="3"

AutoPlay="false" Source="WindowsMedia.wmv"

MediaEnded="MediaEnded"

DownloadProgressChanged="DownloadProgressChanged"/>

Width="24" Height="24"

Canvas.Left="5" Canvas.Top="348"

x:Name="btnPlayPause"

MouseLeftButtonUp="PlayPauseButtonUp">

Width="24" Height="24"

Fill = "#FFFFFFFF" Stroke="#FF000000"

RadiusX="3" RadiusY="3"

x:Name="RectPlay" StrokeThickness="2"/>

Points="8,5 8,19 18,13" StrokeThickness="5"

Fill="Red" Width="24" Height="24"/>

Width="24" Height="24"

x:Name="canvasPause"

MouseEnter="PauseButtonMouseEnter"

MouseLeave="PauseButtonMouseLeave"

Opacity="0">

Width="24" Height="24" Fill="#FFFFFFFF"

Stroke="#FF000000" RadiusX="3" RadiusY="3"

x:Name="RectPause" StrokeThickness="2"/>

Width="6" Height="14"

Fill="#FF141414" Stroke="#FF000000"

Canvas.Left="13" Canvas.Top="5"

x:Name="rectPauseBar1"/>

Width="6" Height="14"

Fill="#FF141414" Stroke="#FF000000"

Canvas.Left="5" Canvas.Top="5"

x:Name="rectPauseBar2"/>

Width="255" Height="27"

Canvas.Left="36" Canvas.Top="346"

x:Name="canvasProgress">

Width="244" Height="8"

Fill="#FF414141" Stroke="#FF000000"

Canvas.Top="10"

x:Name="rectProgressWell" Canvas.Left="8.5"/>

Width="3" Height="8"

Fill="#FF9D0808" Stroke="#FF000000"

Canvas.Top="10"

x:Name="rectDownloadProgress"

StrokeThickness="0" Canvas.Left="8.5"/>

Width="16" Height="16"

Stroke="#FF000000"

Canvas.Top="6" Canvas.Left="0"

x:Name="ellMarker"

MouseLeftButtonDown="EllMarkerMouseDown"

MouseLeftButtonUp="EllMarkerMouseUp">

Width="148" Height="21"

Text="TextBlock" TextWrapping="Wrap"

Canvas.Left="321" Canvas.Top="348"

x:Name="TextBlock"/>

Now double-click on the Page.xaml.jsfile in the Project window to open it. Declare the following global variables at the top of the 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 is loaded, get a reference to all the major controls on the page:

MediaPlayer.Page.prototype = {

handleLoad: function(control, userContext, rootElement) {

this.control = control;

//---get a reference to all the major controls on the page---

MediaElement1 = rootElement.findName("MediaElement1");

ellMarker = rootElement.findName("ellMarker");

textblock = rootElement.findName("TextBlock");

rectProgressWell = rootElement.findName("rectProgressWell");

rectDownloadProgress =

rootElement.findName("rectDownloadProgress");

textblock = rootElement.findName("TextBlock");

//-----------------------------------------------------------

// Sample event hookup:

rootElement.addEventListener("MouseLeftButtonDown",

Silverlight.createDelegate(this, this.handleMouseDown));

},

// Sample event handler

handleMouseDown: function(sender, eventArgs) {

// The following line of code shows how to find an element by

// name and call a method on it.

// this.control.content.findName("Timeline1").Begin();

}

}

Two helper functions — ConvertToTimeSpan()and DisplayCurrentPlayBack()— need to be defined.

The ConvertToTimeSpan()function converts value in seconds to the TimeSpanformat of hh:mm:ss. For example, 61 seconds converts to 00:01:01. You need this function because the Positionproperty of the MediaElementcontrol accepts only values of the TimeSpantype. The ConvertToTimeSpan()function is defined as follows:

//---convert time in seconds to "hh:mm:ss"---

function ConvertToTimeSpan(timeinseconds) {

if (timeinseconds<0) {

return ("00:00:00");

} else if (timeinseconds>60) {

return ("00:00:" + Math.floor(timeinseconds));

} else if (timeinseconds<3600) {

var mins = Math.floor(timeinseconds / 60);

var seconds = Math.floor(timeinseconds - (mins * 60));

return ("00:" + mins + ":" + seconds);

} else {

var hrs = Math.floor(timeinseconds / 3600);

var mins = timeinseconds - (hrs * 3600)

var seconds = Math.floor(timeinseconds - (hrs * 3600) - (mins * 60));

return (hrs + mins + ":" + seconds);

}

}

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 30th second, the DisplayCurrentPlayBack()function displays 00:00:30 / 00:02:00. In addition, the function is also responsible for synchronizing the marker as the media is played. To ensure that the status of the playback is updated constantly, you call DisplayCurrentPlayBack()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)

/ 100;

//---find current position---

var position = MediaElement1.Position.Seconds;