How to play a local media file using a MediaElement (Windows Store apps using C#/VB/C++ and XAML)

In this article

Prerequisites
Set capabilities
Create MediaElement
Use OpenFilePicker to get file
Set the source and play media
Related topics

Important APIs

The MediaElement control can play local media files and media files on the network.

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

Prerequisites

This topic assumes that you know how to create a basic Windows Store app built for Windows using C++, C#, or Visual Basic. For help creating your first app, see Create your first Windows Store app using C# or Visual Basic.

Instructions

Step 1:

In a Windows Store app using C++, C#, or Visual Basic, you can implement audio and video playback by using the MediaElement class. The Source property specifies the media file to play. This can be a file on the network, a file included with the application, or a file on the local system. For files on the network or files embedded into the application, simply set the Source property to the path of the file. To open files on the local system, you can use the FileOpenPicker.

This topic shows how to use the FileOpenPicker class to open a local media file and play it.

Step 2: Set capabilities

To enable access to the media libraries on the local system, an app must include the Music Library Access Capability in the app manifest.

In Microsoft Visual Studio Express 2012 for Windows 8, open the designer for the application manifest by double-clicking the package.appxmanifest item in Solution Explorer.
Click Capabilities.
Check the box for Video Library Access or Music Library Access.

Step 3: Create MediaElement

Create a MediaElement object and give it a Name. Giving the object a name makes it easy to access it in code behind.

XAML


<MediaElement Name="mediaControl" Height="400" />

Step 4: Use OpenFilePicker to get file

Use the FileOpenPicker class to select a media file from the user's Video Library. Set the SuggestedStartLocation and FileTypeFilter properties on the FileOpenPicker. Call PickSingleFileAsync to launch the file picker and get the file.


var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

openPicker.SuggestedStartLocation =
    Windows.Storage.Pickers.PickerLocationId.VideosLibrary;

openPicker.FileTypeFilter.Add(".wmv");
openPicker.FileTypeFilter.Add(".mp4");

var file = await openPicker.PickSingleFileAsync();

Step 5: Set the source and play media

To set the Source of the MediaElement to the StorageFile returned from the FileOpenPicker, we need to open a stream. The OpenAsync method on the StorageFile returns a stream that you can pass into MediaElement.SetSource. Then call Play on the MediaElement to start the media.


var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

// mediaControl is a MediaElement defined in XAML
mediaControl.SetSource(stream, file.ContentType);

mediaControl.Play();

Complete example

This example shows the full code listing to choose a file from the user's video library and set it to the Source of a MediaElement.


async private void SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.SuggestedStartLocation =
        Windows.Storage.Pickers.PickerLocationId.VideosLibrary;

    openPicker.FileTypeFilter.Add(".wmv");
    openPicker.FileTypeFilter.Add(".mp4");

    var file = await openPicker.PickSingleFileAsync();

    var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

    // mediaControl is a MediaElement defined in XAML
    mediaControl.SetSource(stream, file.ContentType);

    mediaControl.Play();
}