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>

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

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.