Silverlight: Multimedia

Overview

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.

Common Methods and Properties

MediaElement has the common playback control methods Play(), Pause() and Stop(). To seek to a specific time in the media you can set the Position property.

The most common properties are AutoPlay, Balance, BufferingProgress, CurrentState, DownloadProgress, NaturalDuration, Position, Source, Stretch, and 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 Width and Height properties of the MediaElement object as this will force Silverlight to scale each frame of the video to the requested size.

View Sample

Events

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 BufferingProgressChanged, CurrentStateChanged, DownloadProgressChanged, MarkerReached, MediaEnded, MediaFailed, and 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.

MediaElement and VideoBrush

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

View Sample

Sample

The following example displays two videos, one partially transparent and animated to move in front of the other.

View Sample

Further Reading

Related information on the web is listed below.