MediaElement can play a number of different types of audio and video media. For more information on supported formats, see Supported Media Formats, Protocols, and Log Fields.

A MediaElement is basically a rectangular region that can display video on its surface, or play audio (in which case there is no video displayed, but the MediaElement still acts as a player object with appropriate APIs). Because it is a UIElement, a MediaElement supports input operations such as mouse and keyboard events, and can capture focus or the mouse. You can specify the height and width of the video display surface using the properties Height and Width. However, for best performance, avoid explicitly setting the width and height of a MediaElement. Instead, leave the values unset. Once you specify a source, the media will display at its natural size, and layout will recalculate the size. If you need to change the size the media displays, it is best to re-encode the media to the desired size using a media encoding tool.

By default, the media that is defined by the Source property plays immediately after the MediaElement object has loaded. To suppress the media from starting automatically, set the AutoPlay property to false.

Note:
For better performance, avoid data binding to the Position property to reflect frequent position updates (e.g. progress bar). Instead, use the DispatcherTimer to query the Position property.

The following example demonstrates how to add media to your page. The XAML example references an event handler that must be defined in code and is not shown in the example.

<MediaElement 
    x:Name="media" 
    Source="xbox.wmv" 
    CurrentStateChanged="media_state_changed" 
    Width="300" Height="300"/>

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Reference

Other Resources