如何使用 HTML5 播放本地媒体文件（使用 JavaScript 和 HTML 的 Metro 风格应用）

本主题显示了如何播放用户电脑上的音频或视频文件。

说明

在采用 JavaScript 的 Metro 风格应用中，你可以通过使用 HTML5 Audio 和 Video 媒体元素实现音频和视频播放。在 src 属性中，音频或视频文件被指定为 URL。

相同的方法可用于播放用户电脑上的媒体文件。唯一的不同是你需要为本地文件创建 URL，如下所示：

1. 使用 FileOpenPicker 选择媒体文件。
2. 调用 URL.createObjectURL 为媒体文件创建对象 URL。
3. 将媒体元素的 src 属性设置为 URL 对象。
4. 在媒体元素上调用 play 方法以启动播放。

若要支持访问媒体库，应用应该首先在应用部件清单 (manifest) 中包含“音乐库访问”功能。

1. 在 Microsoft Visual Studio Express 2012 for Windows 8 中，通过双击解决方案资源管理器中的 package.appxmanifest 项，打开应用程序清单设计器。
2. 单击“功能”。
3. 选中“视频库访问”或“音乐库访问”框。

以下示例使用 FileOpenPicker 从用户的视频库中获取媒体文件并播放它。

JavaScript

 

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

相关主题

媒体播放示例

Video

Audio

引自：  http://msdn.microsoft.com/zh-cn/library/windows/apps/hh452770.aspx