Demo: The Power of Silverlight Video

As we were pretty explicit in declaring at the MIX conference last month, one of the key scenarios for Silverlight 1.0 is delivering rich video experiences. But since the word "rich" is something of a cliché in the web world, I wanted to give a small example of what this means in reality.

To include a video file in your Silverlight application, you simply add a line like the following within the XAML content:

 <MediaElement x:Name="Video" Width="320" Height="180" Source="sample.wmv" />

This creates a pretty raw player, but you can then add a custom skin for the player, along with event handlers to add playback control, handle download or buffering, adjust volume or balance, retrieve metadata, or trigger an action on a timeline marker being reached. If you happen to use Expression Media Encoder (currently a free beta) to re-encode your video file, you can have it automatically generate a skin based on a variety of templates - and indeed you can then use Expression Blend to further customize those skins.

However, one of the most understated features of Silverlight is the powerful rendering engine that sits underneath all this XAML code. Originally codenamed "Jolt", the runtime is a highly-optimized environment that contains many of the revolutionary improvements from the WPF equivalent. The result is that you can apply transforms and animations even to something like video in a tiny amount of code. For example, taking the video above, you can add an animation storyboard that targets the media element to do something really clever like flipping it around, like so:

 <Storyboard x:Name="Flip" AutoReverse="True" RepeatBehavior="Forever">
   <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
      Storyboard.TargetName="Video" 
      Storyboard.TargetProperty="(UIElement.RenderTransform). ↙
                                (TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
      <SplineDoubleKeyFrame KeyTime="00:00:02" Value="-1"/>
   </DoubleAnimationUsingKeyFrames>

The above XAML snippet creates an auto-reversing, auto-repeating animation that flips the video on the y-axis over a two second time period (assuming that the media element contains an attached property of type MediaElement.RenderTransform).

Actually, even these few lines makes this look harder than it needs to be. From Expression Blend, you can simply create a keyframe and manipulate the video however you want - moving it, skewing it, rotating it, scaling it, fading it or flipping it. You can do all that without writing a line of code.

videoflip To demonstrate this, I wrote a small sample that shows off all these transformations. If you have the Silverlight beta release on your machine, click here or on the image to the right to try it out live (hosted by Silverlight Streaming), or of course you can download the sample source code here. Click the various hyperlinks on the right-hand side to start, pause or resume each animation type. It's not the prettiest demo that has ever been written, but I'm sure any designer worth their salt can see how this can be used to create some really interesting effects. Just for interest, I built this sample entirely with Expression Blend; there's minimal code and its function is purely to trigger the various storyboards.

The underlying point here is that Silverlight is a remarkably powerful platform for rendering effects - I can't think of any other platform available today outside of WPF where you could do something like this at runtime without writing reams of complex code - and of course, all this runs cross-browser on both Windows and Macintosh.