如何使用 FileOpenPicker 控制項開啟本機媒體檔案 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]
若要播放使用者電腦上的音訊或視訊檔案,請使用 FileOpenPicker 來存取並開啟檔案。
指示
在使用 JavaScript 的 Windows 市集應用程式中,您可以利用 HTML5 Audio 和 Video 媒體元素實作音訊和視訊的播放。在 src 屬性中,音訊檔案或視訊檔案是指定為 URL。
相同的方法適用於播放使用者電腦上的媒體檔案。唯一的差別在於您需要為本機檔案建立 URL,如下所示:
- 使用 FileOpenPicker 選取媒體檔案。
- 呼叫 URL.createObjectURL,為媒體檔案建立物件 URL。
- 將媒體元素的 src 屬性設定成 URL 物件。
- 在媒體元素上呼叫 play 方法,開始播放。
功能
FileOpenPicker 不需要特殊功能來存取本機檔案系統 (例如,使用者的 Music 或 [視訊] 資料夾) 上的檔案,因為使用者可以完全控制存取的檔案。 從安全性與隱私權的立場看,最佳做法是將 app 使用的「功能」數降到最小。
不過,如果您的 app 需要不藉助使用者互動便存取 Music 或 [視訊] 資料夾 (例如,如果您列舉使用者收藏中的所有音樂或視訊檔案並顯示在 app 中),則您需要宣告 Music Library 和 [視訊庫] 功能。 如需宣告功能的詳細資訊,請參閱應用程式功能宣告。
範例
下列範例會使用 FileOpenPicker,從使用者的 [視訊] 取得媒體檔案,然後加以播放。
Windows Phone 市集應用程式必須使用 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();
}
});
}