FileOpenPicker コントロールを使ってローカル メディア ファイルを開く方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ファイルにアクセスして開く FileOpenPicker を使って、ユーザーのコンピューターにあるオーディオまたはビデオ ファイルを再生します。
手順
JavaScript で開発された Windows ストア アプリでは、HTML5 の Audio および Video メディア要素を使って、オーディオとビデオの再生を実装できます。オーディオまたはビデオ ファイルは URL として src 属性に指定されています。
同じ手法が、ユーザーのコンピューターにあるメディア ファイルの再生にも使われます。違いは、次のように、ローカル ファイル用に URL を作る必要があることだけです。
- FileOpenPicker を使ってメディア ファイルを選びます。
- URL.createObjectURL を呼び出し、メディア ファイル用のオブジェクト URL を作ります。
- メディア要素の src 属性を URL オブジェクトに設定します。
- メディア要素の play メソッドを呼び出し、再生を開始します。
機能
ユーザーはどのファイルにアクセスしているかを完全に制御できるので、FileOpenPicker には、ユーザーのMusic、ビデオフォルダーなど、ローカル ファイル システム上のファイルにアクセスするための特別な機能は必要ありません。 セキュリティとプライバシーの観点から、アプリで使用する機能の数は最小限にすることをお勧めします。
ただし、アプリがユーザーの操作なしで、Musicまたはビデオフォルダーにアクセスする必要がある場合、たとえばユーザーのコレクションのすべての音楽ファイルやビデオ ファイルを列挙し、アプリで表示する場合は、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();
}
});
}