Silverlight makes it easy to add audio and video content to your application using the
MediaElement object. Playback can start automatically and it can also be
controlled via code to create interesting visual elements or a media player. Content can be played directly from a URL
or downloaded first to the client using the
Downloader object and then played.
MediaElement has the common playback control methods
Stop(). To seek to a specific
time in the media you can set the
The most common properties are
Volume which are all self-explanatory.
The Silverlight reference has a great article on the various MediaElement states and how it transitions from one to the other. It is great in getting to understand how buffering and playback relate to each other and when to avoid attempting a play or seek.
For performance reasons it is recommended avoiding setting the
Height properties of the
MediaElement object as this
will force Silverlight to scale each frame of the video to the requested size.
MediaElement is a
UIElement and provides the standard UI object events, but it also provides events that help you track the status of media
downloading, buffering, markers and playback state. You can use these events to synchronize your UI with the media and handle error cases.
The most common media related events are
MediaOpened. As with other objects, if you don't handle the error event
MediaFailed a general
error will be raised if there is a problem with the media item.
Video can be displayed either by making the
MediaElement visible, using a
VideoBrush to paint the video onto surfaces, or a combination of the two.
You can set the
Opacity property to zero if you don't want to have the original
MediaElement to be visible while using a
Normally it is recommended you use the
Visibility property to
Collapsed instead of
Opacity to hide items,
but this will cause any
VideoBrush objects to not display the video either. However, this isn't a concern if you are only playing audio.
The following example uses both ways to display a single video. The original video is displayed in the source
MediaElement and a reflection effect is created
by drawing a copy on the surface of a rectangle below.
The following example displays two videos, one partially transparent and animated to move in front of the other.
Related information on the web is listed below.