C# 2008 Programmer's Reference

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

Creating the Helper Functions

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

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 Position property of the MediaElement control accepts only values of the TimeSpan type. 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;
 //---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;
}

Defining the Event Handlers

Finally you define the various event handlers.

The DownloadProgressChanged event handler is continuously fired when the MediaElement control 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 TextBlock control. In addition, you adjust the width of the rectProgressWell control 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;