How to open local media files using the FileOpenPicker control (HTML)
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Play audio or video files that are on the user's computer using the FileOpenPicker to get access to and open the file.
Instructions
In a Windows Store app using JavaScript, you can implement audio and video playback by using the HTML5 Audio and Video media elements. The audio or video file is specified as a URL in the src attribute.
The same approach works for playing media files located on the user's computer. The only difference is that you need to create a URL for the local file, as follows:
- Use the FileOpenPicker to select a media file.
- Call URL.createObjectURL to create an object URL for the media file.
- Set the src attribute of the media element to the URL object.
- Call the play method on the media element to start playback.
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.
Example
The following example uses a FileOpenPicker to get a media file from the user's Videos and play it.
Windows Phone Store app must use pickSingleFileAndContinue.
function playVideo() {
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.pickSingleFileAsync().then(function (fileItem) {
if (fileItem) {
var video = document.getElementById("myVideo");
video.src = URL.createObjectURL(fileItem);
video.play();
}
});
}