Quickstart: video and audio (Windows Store apps using C#/VB/C++ and XAML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

2 out of 5 rated this helpful - Rate this topic

In this article

Introduction
MediaElement object
MediaElement properties
Controlling media playback
PlayTo and media
Related topics

Important APIs

MediaElement

This topic describes how to integrate media into your Windows Store app built for Windows using C++, C#, or Visual Basic applications.

Roadmap: How does this topic relate to others? See:

Introduction

To play audio and video media in your Windows Store app using C++, C#, or Visual Basic, use the MediaElement class. The MediaElement object exposes properties and methods for playing back media. It is the responsibility of the programmer to create the event handlers which enable this functionality. For example, if you wanted to expose the ability to start the media in your application, you could create a Button and in the Button event handler you would call Play to start the media.

MediaElement object

Adding media to a page is as simple as adding a MediaElement to your markup and providing a Uniform Resource Identifier (URI) to the media file to play. The following example creates a MediaElement and sets its Source property to the URI of a video file. The MediaElement begins playing when the page loads. To suppress media from starting right away, you can set the AutoPlay property to false.

XAML


<StackPanel>
  <MediaElement x:Name="media" Source="Videos/video.wmv" 
                Width="400" />
</StackPanel>

MediaElement properties

The MediaElement object provides several media-specific properties. These are the commonly used properties:

AutoPlay: Specifies whether the MediaElement should begin playing automatically. The default value is True.
IsMuted: Specifies whether the MediaElement is silenced. A value of True mutes the MediaElement. The default value is False.
Stretch: Specifies how video is stretched to fill the MediaElement object. Possible values are None, Uniform, UniformToFill, and Fill. The default is Fill. This illustration shows Stretch value examples.
Volume: Specifies the volume of the MediaElement object's audio as a value from 0 to 1, with 1 being the loudest. The default value is 0.5.

In addition to its media-specific properties, MediaElement also has all the properties of a UIElement, such as Opacity and Clip. For a complete list of the MediaElement properties, see the MediaElement reference page in the Windows Store apps built for Windows using C++, C#, or Visual Basic system documentation on MSDN.

Controlling media playback

You can control media playback by using the Play, Pause, and Stop methods of a MediaElement object. The following example defines a MediaElement object and several buttons for controlling media playback.

XAML


<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" 
                  Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" />

    <!-- Stops media playback.-->
    <Button Click="StopMedia" 
     Grid.Column="0" Grid.Row="1" Content="Stop" />

    <!-- Pauses media playback. -->
    <Button Click="PauseMedia" 
     Grid.Column="1" Grid.Row="1" Content="Pause" />

    <!-- Begins media playback. -->
    <Button Click="PlayMedia" 
     Grid.Column="2" Grid.Row="1" Content="Play" />

</Grid>


private void StopMedia(object sender, RoutedEventArgs e)
{
    media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
    media.Play();
}

Note In addition to stopping, pausing, or playing media, you can also seek to a specific position by setting the Position property of a MediaElement object.

Note

To prevent the display from be deactivating when user action is no longer detected, such as when an app is playing full-screen video, you can call DisplayRequest.RequestActive. To conserve power and battery life, you should call DisplayRequest.RequestRelease to release the display request when it is no longer required. See the Display power state sample and How to keep the display on during audio/video playback for more info.

PlayTo and media

You can use PlayTo to enable users to easily stream audio, video, or images from their computer to devices in their home network. For more information on enabling PlayTo in your Windows Store app using C++, C#, or Visual Basic, see Quickstart: Using PlayTo in applications.

Quickstart: video and audio (Windows Store apps using C#/VB/C++ and XAML)

Introduction

MediaElement object

MediaElement properties

Controlling media playback

PlayTo and media

Related topics