Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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.


advertisement
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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap