共用方式為


如何使用 FileOpenPicker 控制項開啟本機媒體檔案 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

若要播放使用者電腦上的音訊或視訊檔案,請使用 FileOpenPicker 來存取並開啟檔案。

指示

在使用 JavaScript 的 Windows 市集應用程式中,您可以利用 HTML5 AudioVideo 媒體元素實作音訊和視訊的播放。在 src 屬性中,音訊檔案或視訊檔案是指定為 URL。

相同的方法適用於播放使用者電腦上的媒體檔案。唯一的差別在於您需要為本機檔案建立 URL,如下所示:

  1. 使用 FileOpenPicker 選取媒體檔案。
  2. 呼叫 URL.createObjectURL,為媒體檔案建立物件 URL。
  3. 將媒體元素的 src 屬性設定成 URL 物件。
  4. 在媒體元素上呼叫 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();
        }
    });
}

相關主題

媒體播放範例

Video

Audio