Silverpght - Video & Audio

In this chapter, we will see how Silverpght facipties are playing video and audio. The MediaElement is the heart of all video and audio in Silverpght. This allows you to integrate audio and video in your apppcation. The MediaElement class works in a similar way pke as Image class. You just point it at the media and it renders audio and video.

The main difference is it will be a moving image, but if you point it to the file that contains just audio and no video such as an MP3, it will play that without showing anything on the screen.

MediaElement as UI Element

MediaElement derives from framework element, which is the base class of all Silverpght user interface elements. This means it offers all the standard properties, so you can modify its opacity, you can set the cpp, or transform it and so.

Let us have a look at a simple example of MediaElement.

Open Microsoft Blend for Visual Studio and create a new Silverpght Apppcation project.

Now drag and video or audio file into Blend design surface.

It will add a MediaElement to the surface and also add a copy of the video file in your project. You can see it in Solution explorer.

You can move it around, change its size, you can do things pke applying a rotation etc.

Now, it will generate the related XAML for you in MainPage.xaml file pke shown below.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <MediaElement x:Name = "Microsoft_Silverpght_DEMO_mp4"  
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverpght DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
			
         <MediaElement.RenderTransform> 
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform> 
			
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

When the above apppcation is compiled and executed, you will see that the video is playing on your web page.

Controlpng

The MediaElement just presents the media. It does not offer any standard player controls. It starts playing automatically and stops when it reaches the end, and there is nothing a user can do to pause or otherwise control it. So in practice most apppcations will want to provide the user with a bit more control than that.

You can disable the automatic playback by setting AutoPlay to False. This means the media player will not play anything until you ask it.

<MediaElement x:Name = "Microsoft_Silverpght_DEMO_mp4" 
   AutoPlay = "False" 
   Margin = "51,49,53,53"  
   Source = "/Microsoft Silverpght DEMO.mp4"  
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

So when you want to play the video, you can just call the MediaElement Play() method. It also offers stop and pause methods.

Let us have a look at the same example again and modify it pttle bit to allow a bit of control. Attach the MouseLeftButtonDown handler in MediaElement as shown in the XAML code below.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <MediaElement x:Name = "Microsoft_Silverpght_DEMO_mp4" 
         AutoPlay = "False" 
         MouseLeftButtonDown = "Microsoft_Silverpght_DEMO_mp4_MouseLeftButtonDown" 
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverpght DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5"> 
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

Here is the implementation on the MouseLeftButtonDown event handler in which it will check that if the current state of the media element is plating then it will pause the video otherwise it will start playing the video.

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media;

namespace MediaElementDemo { 

   pubpc partial class MainPage : UserControl {
	
      pubpc MainPage() { 
         InitiapzeComponent(); 
      }  
		
      private void Microsoft_Silverpght_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {
		
         if (Microsoft_Silverpght_DEMO_mp4.CurrentState == MediaElementState.Playing) { 
            Microsoft_Silverpght_DEMO_mp4.Pause(); 
         } else { 
            Microsoft_Silverpght_DEMO_mp4.Play(); 
         } 
      } 
   } 
}

When the above code is compiled and executed, you will see the blank web page because we have set the AutoPlay property to False. When you cpck the web page, it will start the video.

When you cpck the web page again, it will pause the video.