Language: HTML | XAML

How to open local media files using the FileOpenPicker control (XAML)

Applies to Windows and Windows Phone

Set the media source of a MediaElement to a local audio or video file stream opened with the FileOpenPicker control.

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

Prerequisites

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

This topic assumes you are familiar with the MediaElement class. For an introduction on using the MediaElement class, see the Quickstart: video and audio.

Instructions

Step 1: Introduction

In a Windows Runtime app using C++, C#, or Visual Basic, use the MediaElement class to play audio or video media. 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.

To play files on the network or files embedded with the app, set the Source property to the path of the file. See How to play media files from the network for more info.

To open files on the local system or from Microsoft OneDrive, you can use the FileOpenPicker to get the file and SetSource to set the media source.

In this topic we will go over setting the media source using the FileOpenPicker control.

For info on supported audio and video media formats in Windows Store apps, see Supported audio and video formats.

Step 2: Capabilities

The FileOpenPicker does not require special Capabilities to access files on the local file system, such as the user's Music or Video folders, since the user has complete control over which file is being accessed. From a security and privacy standpoint, it is best to minimize the number of capabilities your app uses.

But if your app needs access without user interaction to the Music or Video folders, for example if you are enumerating all the music or video files in the user's collection and displaying them in your app, then you need to declare the Music Library and Video Library capabilities. See App capability declarations for more info on declaring capabilities.

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.


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


Step 4: Use OpenFilePicker to get file

Use the FileOpenPicker class to select a media file. Set the FileTypeFilter to specify which file types the FileOpenPicker will display. Call PickSingleFileAsync to launch the file picker and get the file.

Windows Phone Store app must use pickSingleFileAndContinue.


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

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

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
if (null != file)
{
    mediaControl.SetSource(stream, file.ContentType);

    mediaControl.Play();
}


Complete example

This example shows the full code listing for using the FileOpenPicker get choose a file and setting the file to the Source of a MediaElement.


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



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

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

    var file = await openPicker.PickSingleFileAsync();

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

    // mediaControl is a MediaElement defined in XAML
    if (null != file)
    {
        mediaControl.SetSource(stream, file.ContentType);

        mediaControl.Play();
    }
}


Related topics

Roadmap for creating Windows Store apps using C#, C++, or VB
How to open media files from the network
Quickstart: video and audio
XAML media playback sample
Windows.Media
MediaElement
Media playback, start to finish

 

 

Show:
© 2014 Microsoft