Playing with Media in Silverlight 1.0 : Page 2

Waiting for Silverlight to deliver on its promise of delivering rich media experiences? Take your first steps with this tutorial on how to embed a Windows media file in your Silverlight application, control its playback, and create simple video effects.

by Wei-Meng Lee

Dec 21, 2007

Page 2 of 3

Disabling Autoplay
While automatically playing a video is a useful feature, sometimes you might want to disable the auto play default. For example, if you have multiple videos embedded in a page, this feature is actually more of a nuisance than anything. To disable the auto play feature, just set the AutoPlay attribute in the <MediaElement> element to False, like this:


	<Canvas Width="544" Height="595" Canvas.Left="8" 
		Canvas.Top="8">	
		<MediaElement x:Name="WindowsMedia_wmv" 
		   AutoPlay="False" 
		   Width="320" Height="240" 
		   Source="WindowsMedia.wmv" 
		   Stretch="Fill"/>
	</Canvas>

So how and when do you get it to play? You shall programmatically play the video when the user's mouse enters the video and pause it when the mouse leaves the video. Also, if the user clicks on the video, the video shall stop and return to the beginning. To do so, set the following attributes highlighted in bold:

	
	<Canvas Width="544" Height="595" Canvas.Left="8" 
		Canvas.Top="8">	
		<MediaElement x:Name="WindowsMedia_wmv" 
               AutoPlay="False" 
               MouseEnter="MouseEnter"
               MouseLeave="MouseLeave"
		   MouseLeftButtonDown="MouseClick"
               Width="320" Height="240" 
               Source="WindowsMedia.wmv" 
               Stretch="Fill"/>
	</Canvas>

Basically, you are setting the event handlers for the various events handled by the <MediaElement> element. To write the event handler, go to the Project window and double-click on the Page.xaml.js file.

Append the Page.xaml.js file with the following code:


function MouseEnter (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.play();
}

function MouseLeave (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.pause();
}

function MouseClick (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.stop();
}

The findName() method allows you to programmatically get a reference to the specified element (via its x:Name attribute) on the Silverlight page. In this case, you are referencing an instance of the MediaElement object. This object supports the play, pause, and stop properties.

Press F5 to test the application again. This time, you will notice that the video will start to play when the mouse hovers over the video and will pause when it leaves the video. To restart the video to the beginning, simply click on the video.

« Previous Page 123 Next Page »