How to play a local media file using HTML5 (Windows Store apps using JavaScript and HTML)

This topic shows how to play an audio or video file that is on the user's computer.

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:

1. Use the FileOpenPicker to select a media file.
2. Call URL.createObjectURL to create an object URL for the media file.
3. Set the src attribute of the media element to the URL object.
4. Call the play method on the media element to start playback.

To enable access to the media libraries, an app should first include the Music Library Access Capability in the app manifest.

1. 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.
2. Click Capabilities.
3. Check the box for Video Library Access or Music Library Access.

The following example uses a FileOpenPicker to get a media file from the user's Video Library and play it.

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();
        }
    });
}

Related topics

Media Playback Sample

Video

Audio

Build date: 11/29/2012