Channels ▼


Silverlight Media Elements

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"
  MouseLeftButtonDown="MediaElement_MouseLeftButtonDown" />
Listing Three: Media Element with bound events

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"
  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
        <VideoBrush SourceName="MediaElementElement" />
Listing Four: Media Element and Text Bock with a Video Brush

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.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.