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:
- Open the 3DInvadersSilverlight project.
- Open 3DInvadersSilverlightTestPage.aspx (double-click on it in the
Solution Explorer, found under 3DInvadersSilverlight.Web project) and
enable hardware acceleration (GPU acceleration). - Create a new sub-folder in the ClientBin folder in the
3DInvadersSilverlight.Web project. Rename it to Media. - Right-click on the previously mentioned folder and select Add | Existing item… from
the context menu that appears. - 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: - 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>
- 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(); }
- 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(); }
- 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();
- 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):
- Stay in the 3DInvadersSilverlight project,.
- 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>
- 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:
- Stay in the project, 3DInvadersSilverlight.
- 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" />
- 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>
- Now, add the following line of code before the end of the
PlayIntroductoryVideo method (to start the animation):
introductionSB.Begin(); - 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.