다음을 통해 공유

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.

Comments

  • Anonymous
    June 19, 2007
    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?

  • Anonymous
    June 20, 2007
    The links on the right ("Skew, Rotate", etc) don't work in Firefox...

  • Anonymous
    June 20, 2007
    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.

  • Anonymous
    June 20, 2007
    The comment has been removed

  • Anonymous
    June 21, 2007
    The comment has been removed

  • Anonymous
    July 04, 2007
    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!

  • Anonymous
    July 04, 2007
    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

  • Anonymous
    January 28, 2008
    Here are the some cool links of silver light videos: http://www.microsoft.com/silverlight/video.aspx