Video formats supported in Silverlight 3

Silverlight 3 supports the video encodings shown in the following table:

	Silverlight 3 does not support interlaced video content.

If we want to use a video with an encoding format that does not appear in the previously
shown table, we will have to convert it to one of the supported formats.

Using free applications to convert video formats

Expression Encoder is not the only application capable of converting videos to the encoding
profiles supported by Silverlight 3. We can also use many free or open source applications
and several online services to convert videos to any of the previously shown formats.

One example of a free and open source audio and video converter is
MediaCoder (http://mediacoder.sourceforge.net/).

One example of a free online service to convert audio and video from one format to other
is Media Convert (http://media-convert.com/). The advantage of online services
dedicated to converting video formats is that they do not require the installation of
additional soft ware. Their trade-off is that we have to upload the original video file and then
download the converted output video file. If the video files are big, we will need a very fast
Internet connection.

	If you have to convert too many big files and you do not have a fast Internet
	connection, installing a free and open source video converter such as
	MediaEncoder is a good choice.

Time for action – reproducing videos

Now, we are going to reproduce the video converted to a WMV format with an HD 720p
Intranet encoding profile, before starting the game:

1. Open the 3DInvadersSilverlight project.
2. Open 3DInvadersSilverlightTestPage.aspx (double-click on it in the
   Solution Explorer, found under 3DInvadersSilverlight.Web project) and
   enable hardware acceleration (GPU acceleration).
3. Create a new sub-folder in the ClientBin folder in the
   3DInvadersSilverlight.Web project. Rename it to Media.
4. Right-click on the previously mentioned folder and select Add | Existing item… from
   the context menu that appears.
5. Go to the folder in which you have copied the previously encoded video in the WMV
   format (C:\Silverlight3D\Invaders3D\Media). Select the WMV file and click
   on Add. This way, the video file will be part of the web project, in the new Media
   folder, as shown in the following screenshot:

6. Open MainPage.xaml (double-click on it in the Solution Explorer) and insert the
   following lines of code before the line that defines the cnvMainScreen Canvas:

   
   	<Canvas x:Name="cnvVideo" Visibility="Collapsed" >
   		<MediaElement x:Name="medIntroduction" Width="1366"
   					Height="768" AutoPlay="False"
   					CacheMode="BitmapCache" Stretch="UniformToFill"
   					Source="Media/introduction_HD.wmv"
   					MediaEnded="medIntroduction_MediaEnded"/>
   	</Canvas>
   

7. Add the following lines of code to program the event handler for the
   MediaElement’s MediaEnded event (this code will start the game when
   the video finishes):

   
   	private void medIntroduction_MediaEnded(object sender,
   						RoutedEventArgs e)
   	{
   		StartGame();
   	}
   

8. Add the following private method to play the introductory video:

   
   	private void PlayIntroductoryVideo()
   	{
   		// Show the Canvas that contains the MediaElement as a child
   		cnvVideo.Visibility = Visibility.Visible;
   		// Play the video
   		medIntroduction.Play();
   	}
   

9. Replace the code in the transitionSB_Completed method with the following.
   (We want to play the introductory video instead of starting the game, once the
   transition finishes.):

   
   //StartGame();
   PlayIntroductoryVideo();
   

10. Build and run the solution. Click on the button and the video will start its
    reproduction after the transition effect, as shown in the following screenshot:

What just happened?

Now, the application shows an introductory video before starting the game. However,
your project manager wants you to add some kind of 3D effect to the video. Players must
understand that they are going to play a 3D game.

Locating videos in a related web site

First, we had to convert the original video to an encoding profile compatible with Silverlight
3. Then, we added it to a new Media sub-folder in the related website ClientBin folder.
This way, we do not embed the large video file in the application’s .xap file.

	The .xap file's size determines the time needed to download the Silverlight
	application. We are using the application's website to hold the media files. This
	way, we avoid generating a huge .xap file and the application downloads the
	media files on-demand.

The Source property uses a relative Uri(Media/introduction_HD.wmv) because the
root folder for the .xap application is the ClientBin folder and the video is located in
ClientBin/Media.

The AutoPlay property was set to False because we did not want the video to begin its
reproduction until the transition ended.

Stretching videos

The video file prepared for Silverlight 3 uses a resolution of 1280X720 pixels. However, our
game was prepared for 1366X768 pixels. Therefore, we created added a Canvas (cnvVideo)
with a MediaElement instance (medIntroduction) as a child, using XAML code.

We defined the reproduction area to be 1366X768 pixels and we assigned the
UniformToFill value to the Stretch property. Thus, the MediaElement resizes the
original 1280X720 pixels video to fill its dimensions (1366X768 pixels) while preserving the
video’s native aspect ratio.

The following diagram shows the results of using the four possible values in the Stretch
property with the same original video:

The following table explains the results of using the previously mentioned values:

Taking advantage of GPU acceleration to scale videos

We configured the web project to start the Silverlight plug-in with hardware acceleration
capabilities. As we are using the UniformToFill value for the Stretch property, assigning
the BitmapCache value to the MediaElement’s CacheMode property, Silverlight will try to
perform the resize operation using the GPU.

	The GPU acceleration will work only when the MediaElement has to show the
	video in a different size. If the value assigned to the Stretch property is None,
	the video size will not change and there will be no GPU assistance during the
	reproduction process.

First, we made cnvVideo visible and then we started reproducing the video calling
medIntroduction’s Play method, in the PlayIntroductoryVideo method.

As we wanted the game to start once the video ended, we programmed the MediaEnded
event handler with the following line:

	StartGame();

Time for action – applying projections

We want players to understand that they are going to play a 3D game. Hence, we will add a
plane projection to the Canvas that contains the video (the MediaElement instance):

1. Stay in the 3DInvadersSilverlight project,.
2. Open MainPage.xaml and insert the following lines of code after the line that
   defines the medIntroduction MediaElement:

   
   	<Canvas.Projection>
   		<PlaneProjection RotationX="-40" RotationY="15" RotationZ="-6"
   				LocalOffsetX="-70" LocalOffsetY="-105" />
   	</Canvas.Projection>
   

3. Build and run the solution. Click on the button and the video will start its
   reproduction after the transition effect. However, this time, it will be displayed
   projected using a perspective transform, as shown in the following screenshot:

What just happened?

Your project manager is amazed! The 3D digital artists are astonished! You could add a
3D perspective to the 2D video in just a few seconds. Now, the introductory video is even
more att ractive.

We added a PlaneProjection instance to the Canvas (cnvVideo) that contains
the MediaElement (medIntroduction). Then, we assigned the following values to
its properties:

• RotationX: -40
• RotationY: 15
• RotationZ: -6
• LocalOffsetX: -70
• LocalOffsetY: -105

The RotationX, RotationY, and RotationZ properties specify the number of degrees to
rotate the Canvas in the space. The LocalOffsetX and LocalOffsetY properties specify
the distance the Canvas is translated along each axis of the Canvas’ plane.

	We can apply a perspective transform to any UIElement by setting its
	Projection property to a PlaneProjection instance. Then, we
	can assign the desired values to the PlaneProjection's properties.

PlaneProjection is a subclass of the Projection class. The last one allows you to
describe how to project a 2D object in the 3D space using perspective transforms.

Time for action – animating projections

Your project manager wants you to animate the perspective transform applied to the video
while it is being reproduced.

We are going to add a StoryBoard in XAML code to animate the
PlaneProjection instance:

1. Stay in the project, 3DInvadersSilverlight.
2. Open MainPage.xaml and replace the PlaneProjection definition
   with the following line (we have to add a name to refer to it):

   
   	<PlaneProjection x:Name ="proIntroduction" RotationX="-40"
   				RotationY="15" RotationZ="-6" LocalOffsetX="-70"
   				LocalOffsetY="-105" />
   

3. Add the following lines of code before the end of the definition of the
   cnvVideo Canvas:

   
   	<Canvas.Resources>
   		<Storyboard x:Name="introductionSB">
   			<DoubleAnimation Storyboard.TargetName="proIntroduction"
   							Storyboard.TargetProperty="RotationX"
   							From="-40" To="0" Duration="0:0:5"
   							AutoReverse="False" RepeatBehavior="1x" />
   		</Storyboard>
   	</Canvas.Resources>
   

4. Now, add the following line of code before the end of the
   PlayIntroductoryVideo method (to start the animation):
   introductionSB.Begin();
5. Build and run the solution. Click on the button and the video will start its
   reproduction after the transition effect. While the video is being played,
   the projection will be animated, as shown in the following diagram:

What just happened?

Now, the projection that shows the video is animated while the video is being reproduced.