» Layout

Playing Video with the MediaElement

Using the flexible MediaElement control as a reusable Surface

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.

Tools Time Downloads
Expression Blend Silverlight Expression Encoder 30 minutes
30 minutes
Word (.docx) Word
Acrobat (.pdf) PDF

01 Start a New Project

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.

02 Add a MediaPlayer

If you installed Expression Encoder along with Expression Blend, you will find a MediaPlayer control in the Assets Panel. If you did not install Encoder, skip to step 05, otherwise draw a MediaPlayer control onto the Artboard.

03 Add a video to the Playlist

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.

04 Check out the MediaPlayer

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.

05 Add a MediaElement

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.

06 Add a TextBlock

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”.

07 Create a VideoBrush

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.

08 See the Video play on Text

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.

09 Edit the VideoBrush

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.

10 One more time!

Hit F5 to Run the Project again to see the changes made to the mediaBrush Resource take effect. Success!

» Next Step

Now, let's try Arranging Pictures to Learn Layout

To continue learning about Media in Expression Blend read this Audio and Video Overview article on MSDN.