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.

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

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

Reference