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.TargetProperty="(UIElement.RenderTransform). ↙
"> <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.

Comments (8)
  1. Anonymous says:

    I agree with the post about the power of WPF, but unfortunately, this example doesn’t seem to work in firefox for me, but does work in IE 7. This actually kind of scares me as a developer because silverlight could easily go down the path of CSS/HTML where you have to deal with different rendering and behavior in each browser on each OS. As the post states, the fact that this all runs cross-browser is a huge plus but are we already seeing that not to be the case?

  2. Anonymous says:

    The links on the right ("Skew, Rotate", etc) don’t work in Firefox…

  3. Tim Sneath says:

    Sorry – that’s my fault. I was jet-lagged when I posted this last night and made a change to the JavaScript that I didn’t test properly. It should work now on all browsers and platforms.

  4. Anonymous says:

    I’m converting over from a long history with Flash to Silverlight and am loving it. I LOVE video brushes, etc. However, am I correct in assuming that chroma key is still not supported? I’m not that familiar with WMV, I don’t think it supports alpha channels (though I can be wrong, I think its hackable somehow), but the bigger issue is if Silverlight 1.1 would render it properly. I thought I read it can’t, but I’ve been loving all over the web for the past 24 hours I can’t find that link. Am I wrong? When can we expect to see this added? I would think it would be the next big thing in video silverlight has to do, right?

  5. Anonymous says:

    Silverlight Cream for June 21, 2007

  6. Anonymous says:

    Is the windows media player activeX still required to play the video, or is SilverLight handling the rendering?  So, for example, when your sample video above is displayed on a Mac in Safari, but the wmp is not installed on the client, will the video still play? BTW, awesome sample. Thanks in advance!

  7. Tim Sneath says:

    Hi Steve,

    Silverlight handles the rendering itself – there’s no dependency at all on Windows Media Player. The video will absolutely play in the scenario you suggested (Mac / Safari), even without WMP installed.

    Thanks, Tim

  8. Anonymous says:

    Here are the some cool links of silver light videos:

Comments are closed.

Skip to main content