Media Element Events
Now, let's look at a few of the other events that we can wire up off of the media element. The first four elements are downloadProgressChanged, mediaOpened, MediaEnded, and MouseLeftButtonDown. The first three are related to the media, and the last is a common event we used earlier. In this case MediaElement_MouseLeftbuttonDown is used to make the full-screen mode of the application resize back to normal. We can then reuse the event we bound to earlier to resize the application, without having to have two blocks of code that do the same thing. DownloadProgressChanged is just what it says: Anytime something changes about the download, we get this event and can do something like a download progress bar. MediaOpened is fired when the media is downloaded and ready to play. We might use this to have a preloader animation for our media element. MediaEnded is fired when the media is complete and/or when something goes wrong with the stream or download. We should be able to deal with a number of conditions here and can use this to do some error handling. All these events are wired in Listing Three.
<MediaElement Name="MediaElementElement" Canvas.Left="0" Canvas.Top="0" Width="464" Height="348" IsMuted="False" AutoPlay="True" DownloadProgressChanged="MediaElement_DownloadProgressChanged" MediaOpened="MediaPlayerElement_MediaOpened" MediaEnded="MediaElement_MediaEnded" MouseLeftButtonDown="MediaElement_MouseLeftButtonDown" />
You can see from this code that it's straightforward to bind these events, and for the most part you will always use the first three; however, you would also need to give the media element a source. Now that you have a media element going, we can do even cooler stuff with a Video brush bound to our media element.
Video Brush and the Media Element
The "video brush" is a great way to create cool special effects. To make a video brush work you, have to have a named media element that you can bind to. That has a bound source. In Listing Four, we have a source. We have set the element to be muted but play and its opacity is 0 so no one sees it on screen. Then we add some text in a text block app and add a foreground element with a "video" brush. The video brush element is bound to the media element by using the media element name. Using a video brush you can basically make just about anything play video.
<MediaElement Name="MediaElementElement" Source="ImenSample.2.wmv" Canvas.Left="20" Canvas.Top="20" Width="100" Height="100" IsMuted="True" AutoPlay="True" Opacity="0" /> <TextBlock Name="Sample Text" FontSize="20" FontFamily="Verdana" FontWeight="Bold" Canvas.Left="10" Canvas.Top="50" Opacity="1" >PAINT WITH VIDEO <TextBlock.Foreground> <VideoBrush SourceName="MediaElementElement" /> </TextBlock.Foreground> </TextBlock>
When this XAML is rendered, we get the text "Paint with video" that is playing video in the background of the text.
Now we can set properties, bind events, and use video elements in a video brush. With that basic understanding of media elements and being able to use a video brush, we can move on to more complicated composite tasks.