Playing video or audio in Silverlight is as simple as adding a MediaElement control and setting its Source property to the URL of your media. The control exposes methods and event allowing you to control playback and can be used in a variety of ways. When playing audio the MediaElement remains hidden and when playing video the MediaElement acts as a reusable surface.
In this tutorial we’ll take a look at the MediaPlayer control, included with Expression Encoder, for simple playback. We’ll also walkthrough creating and using a VideoBrush to Fill Text.
Open Blend and go to File -> New Project. Select Silverlight 3 Application + Website as your project type and name the project BasicMedia. After hitting OK, the new Project will be created for you and MainPage will be open on the Artboard.
On the Properties panel in the Media Section, click the “New” button next to Playlist. Next click the “…” button next to Items to add a Playlist Item. In the new window, click “Add another Item” and set the MediaSource of the item to this inspirational Silverlight 3 launch video (copy this url). You can use another hosted video if you like; just make sure it’s a supported codec (WMV, VC-1, H.264). Hit OK to close the Items editor.
Hit F5 to Run the Project and you’ll see the MediaPlayer in action. This is the easiest way to add a MediaPlayer to your application. This player comes with functionality like AutoPlay, Download Progress, Fullscreen, new window Pop Out and full transport controls. To customize the look you can use other skins available via Expression Encoder or you edit the player’s template directly by right-clicking on it and selecting Edit Template -> Edit a Copy.
To continue our look at Media basics, let’s dropdown to the main control for displaying video, the MediaElement. Delete the MediaPlayer and draw a MediaElement onto the Artboard. Set the Source property to the Silverlight 3 launch video (copy this url) or a different video of your choice. The MediaElement is a container for video or audio that exposes methods and events to control playback.
In the first example on this page, MediaElement was used as a component of the MediaPlayer control to playback video. We’re now going to explore how MediaElement can be used as the source for a Brush to fill text. Add a TextBlock below the MediaElement and set the font to something large like Verdana : Bold : 48pt and set the text to something witty like “Video Killed the Radio Star”.
Select the MediaElement and from the top menu select Tools > Make Brush Resource > Make Video Brush. Name the new VideoBrush Resource mediaBrush and hit OK. Select the TextBlock and change the Foreground Brush to use mediaBrush by selecting the resource from the Brush Resources tab in the Brush Type selection row directly below.
Hit F5 to Run the Project and observe the video from the MediaElement used as a Brush to Fill the Text. The beauty of this is that the video is only downloaded and decoded once so you’re not suffering any penalties in performance.
You can edit Resources at any time, by accessing the Resource tab and navigating to the right location. In this case the mediaBrush Resource is under MainPage.xaml > [UserControl]. Here you can modify the Stretch and Opacity Properties to change the look of the Brush.
Hit F5 to Run the Project again to see the changes made to the mediaBrush Resource take effect. Success!