メディア再生の概要 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

オーディオとビデオの再生や、バッテリー残量の節約とレンダリングの最適化を行う、Windows 8.1 の機能豊富なメディア アプリを作る方法について説明します。

JavaScript を使ってメディア機能が搭載された Windows ストア アプリを作る方法の概要について考えます。Windows 8.1 には多くの改良が加えられているため (新しい msRequestFullscreen API など)、以前より簡単になっています。次の点について考えます。

• メディア再生の基本: audio および video HTML 要素を使う、トランスポート コントロールを有効にする、デバイスまたはネットワークからメディア ファイル読み込む、など。
• メディア再生機能: 画面が暗転するのを適切に防止する、オーディオをバックグラウンドで再生する、システム メディア トランスポート コントロールを操作する、ビデオのサイズを変更する、カスタム トランスポート コントロールを作る、フル ウィンドウのレンダリングを有効にする、など。
• アプリの基本: アプリの状態を維持する、アプリ バーに UI を作る、設定ポップアップを作る、など。

JavaScript を使って Windows ストア アプリを開発するのが初めての場合は、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧いただくと、すぐに慣れることができます。

以下の各手順は方法トピックにリンクされており、例とコードが用意されているため、詳しく知りたい場合は調べてみてください。

メディア再生の概要のサンプルに関するページには、ここで説明するすべての内容が含まれています。対応するこのサンプルをたびたび取り上げて、特定の機能が実装される場所を指し示します。

メディア アプリの作成

サンプルの作成 この手順に従ってアプリにメディア機能を追加する場合、まず「フラット ナビゲーションの概要」と関連するフラット バージョン パターン テンプレートから始めます。または、Microsoft Visual Studio で空の Windows ストア アプリ プロジェクトやナビゲーション プロジェクトを作ります。対応するサンプルには簡単なナビゲーション構造がありますが、ヘルパー関数の一部を、空のテンプレートには含まれていない navigation.js, で使っています。このため、いずれかのナビゲーション テンプレートで始めて、必要ないものを削除した方が簡単かもしれません。 または、メディア再生の概要の対応するサンプルに関するページに直接スキップしてください。 対応するサンプルには、ここでの手順がすべて実装されていますが、説明を進めるためコードについては詳しく説明しません。各手順には、「"サンプルで確認しましょう"」セクションがあり、コードですばやく見つけることができます。 サンプルのソース ファイルの構造はシンプルかつフラットなため、ソース ファイルの複数の層をドリルダウンしなくてもコードを簡単に見つけることができます。 しかし、自身のプロジェクトは細かく分けて、異なる仕方で整理することができます。

 

メディア再生の基本

	クイックスタート: アプリでのビデオの再生 アプリでビデオの基本をセットアップします。 この方法トピックでは、その方法について詳しく説明しますが、基本的なオーディオとビデオを再生する場合は、audio 要素か video 要素を HTML に追加し、src プロパティをメディア ファイルに設定するだけです。 メディア再生を制御するには、controls 属性を audio 要素か video 要素に追加して、組み込みのトランスポート プロトコルを使います。controls プロパティを true または false に設定して、コントロールを有効または無効にします。トランスポート コントロールは、再生ボタンやボリューム コントロールなど、一般的なメディア UI 要素を提供します。 これらのコントロールは、サンプルでは次のようになります。 サンプルで確認しましょう:video 要素には mediaVideo という名前が付いており、\pages\mediaPlayer\mediaPlayer.js ファイルにおいて HTML で定義されています。
	サポートされるオーディオとビデオの形式 JavaScript を使った Windows ストア アプリでは、多くのオーディオおよびビデオ形式がサポートされます。 詳しい一覧を参照するには、リンクをクリックしてください。
	FileOpenPicker コントロールを使用してローカル メディア ファイルを開く方法 ここまでで、メディア再生が可能になったため、アプリの実行中にメディア ソースを設定しましょう。 FileOpenPicker コントロールを使うと、ユーザーはローカル ファイル システムや Microsoft OneDrive からファイルを選ぶことができます。この手順は、FileOpenPicker をセットアップする方法と、video.src プロパティを FileOpenPicker により返されたファイルに設定する方法を示しています。 StorageApplicationPermissions.futureAccessList を使って、FileOpenPicker で開かれたファイルのアクセス許可を保存します。 そうすると、アプリが後で (アプリが終了状態から復元したときなど) ファイルにアクセスできるようになります。 FileOpenPicker は次のように表示されます。 FileOpenPicker では、アプリが音楽、ビデオ、ドキュメントなどのシステム フォルダーの機能を制限する必要がありません。これは、FileOpenPicker と開くファイルをユーザーが全面的に制御するためです。 セキュリティとプライバシー保護のため、アプリで宣言する機能はできるだけ少なくしてください。 ただし、ユーザー入力がなくてもアプリがビデオ フォルダーと音楽フォルダーにアクセスできるようにする場合 (たとえば、音楽フォルダーのすべてのアルバムアートを表示するなど)、対応する機能を宣言する必要があります。詳しくは、「アプリ機能の宣言」をご覧ください。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.js で setMediaSourceFromFilePicker 関数と setMediaSourceFromFile 関数を確かめ、\pages\mediaPlayer\mediaPlayer.html で browseButton アプリ バー ボタンを確かめてください。
	ネットワークからメディア ファイルを開く方法 FileOpenPicker コントロールは、ローカル システムのファイルを取得するのに適していますが、ネットワーク上のファイルにメディア ソースを設定することはできません。これを行うには、src をネットワーク上のメディア ファイルのパスに設定するだけです。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.js で setMediaSourceFromTextBox 関数と setMediaSourceFromPath 関数を確かめてください。さらに、\pages\mediaPlayer\mediaPlayer.html で txtSourceInput input 要素も確かめてください。この要素は、メディア パスの入力に使われます。

 

メディア再生機能

	オーディオとビデオの再生中に表示をオンのままにする方法 通常、Windows ストア アプリが一定期間内にユーザー入力を検出しない場合、画面が暗転し、最終的にオフになります。 ほとんどのアプリでは、エネルギーとバッテリー残量が節約されるため、これは望ましい動作です。しかし、メディア アプリでは、ビデオを視聴している可能性があるためディスプレイを暗転させない必要があります。 System.Windows.Display.DisplayRequest クラスを使って、アプリの実行中はディスプレイを常にオンにするようにシステムに指示します。ただし、アプリが中断した、メディアが再生を終了した、メディアが一時停止されたなど、アプリがこの要求を必要としなくなったらすぐにキャンセルするようにしてください。 この要求をキャンセルしないと、バッテリー残量が消費されます。 組み込みのトランスポート コントロールのフル ウィンドウ ボタンや msRequestFullscreen 関数を使ってフル ウィンドウ レンダリングが有効になっている場合、画面の暗転の無効化と再有効化がシステムにより自動的に処理されます。そのため、フル ウィンドウ モードでのみ画面の暗転を無効にする必要がある場合、DisplayRequest を自分で管理する必要はありません。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.js で setScreenDimming 関数を確かめてください。
	システム メディア トランスポート コントロールの使用方法 Windows 8.1 には、システム メディア トランスポート コントロールを操作する新しいクラスが導入されています。今後は、以前の MediaControl クラスの代わりに SystemMediaTransportControls を使ってください。 システム メディア トランスポート コントロールは、HTML メディア オブジェクトのトランスポート コントロールとは異なります。 これらは、ヘッドホンのボリューム コントロールやキーボードのメディア ボタンなどのようなハードウェア メディア キーを押すとポップアップするコントロールです。 アプリは、これらのコントロールを使って、メディア メタデータ (アルバム アートや曲のタイトルなど) を渡して表示されるように登録することができます。 コントロールを次に示します。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.js で WinJS.UI.Pages.define、setupSystemMediaTransportControls、systemMediaControlsButtonPressed の各関数を確かめてください。同様に、\pages\mediaPlayer\mediaPlayer.js で mediaPlaying、mediaPaused、mediaEnded の各イベント ハンドラーを確かめてください。
	バックグラウンドでオーディオを再生する方法 ここでは、バックグラウンド オーディオ サポートをセットアップし、ユーザーが別のアプリを操作しながらアプリで音楽を聴くことができるようにします。 オーディオを再生しているアプリがバックグラウンドに移動すると (ユーザーが別のアプリに切り替えたなど)、既定の動作ではオーディオが停止します。 ただし、音楽アプリはオーディオの再生が継続されることを選ぶことができます。 オーディオをバックグラウンドで再生するには、アプリ マニフェストの Declarations セクションでバックグラウンド オーディオ タスクを設定する必要があります。 さらに、SystemMediaTransportControls で isPlayEnabled プロパティと isPauseEnabled プロパティを有効にし、buttonpressed イベントを処理する必要があります。これは、アプリがアクティブなアプリでないときにオーディオを再生および停止できるようにするために必要です。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.html で video 要素を、\pages\mediaPlayer\mediaPlayer.html で setupSystemMediaTransportControls 関数を確かめ、バックグラウンド タスクを有効にする package.appmanifest.xml の Declarations セクションを確かめます。
	フル ウィンドウのレンダリングを有効にする方法 audio オブジェクトと video オブジェクトの組み込みのトランスポート コントロールには、フル ウィンドウ ボタンがあります。 ただし、フル ウィンドウのレンダリングをプログラムにより有効または無効にする場合、msRequestFullscreen 関数を使います。 Windows 8.1 より前は、フル ウィンドウの境界を計算し、他の UI を自分で表示および非表示にする必要がありました。これを正しく行わなかった場合、一部のレンダリング最適化が有効にならない可能性がありました。 このため、フル ウィンドウのレンダリングを有効または無効にする場合、常に msRequestFullscreen 関数を使います (そしてその方が簡単です)。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.js で fullScreenMedia 関数を確かめてください。
	カスタム トランスポート コントロールを作成する方法 audio および video トランスポート コントロールが提供する機能を拡張する必要がある場合や、完全に置き換える場合は、カスタム トランスポート コントロールを作る必要があります。 メディア再生の概要サンプルでは、AppBar にすべてのカスタム トランスポート コントロールが実装されていますが、組み込みのトランスポート コントロールは有効なままです。 独自のカスタム トランスポート コントロールを作る場合、組み込みの UI を独自の UI にそのまま置き換えることができます。 組み込みのトランスポート コントロールを無効にするには、controls を false に設定します。 この方法トピックでは、再生、一時停止、停止、早送り、巻き戻し、再生位置のスライダー、フル ウィンドウ、オーディオ セクション、ミュート、ボリュームのカスタム トランスポート コントロールを作る方法について説明します。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.html で AppBar 要素を確かめてください。機能を実装するイベント ハンドラーについては、\pages\mediaPlayer\mediaPlayer.js をご覧ください。

 

アプリの基本

	アプリ バーの追加 WinJS.UI.AppBar を使って、アプリを操作する UI、audio オブジェクト、video オブジェクトをアプリ バーに配置します。WinJS.UI.AppBarCommand コントロールは、AppBar 用に特別に作られているため、快適に機能します。 使うことができるコントロール型は "button"、"toggle"、"flyout"、"separator"、"content" です。 WinJS.UI.AppBarIcon 列挙値には、AppBarCommand.icon に使うことができる多くのシンボルが含まれています。独自のカスタム ポータブル ネットワーク グラフィックス (PNG) ファイルを指定することもできます。 対応するサンプルで AppBar ボタンがどのように表示されるかを示します。 対応するサンプルでは、オーディオ トラック選択コントロールとボリューム コントロールにポップアップが使われています。 これにより、スペースを節約できます。 AppBar の使用とアプリの設計については、「アプリ バーのガイドライン」をご覧ください。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.html で <div id="appBarTop" 要素と <div id="appBarBottom" 要素を確かめてください。 特定のコントロールと機能がどのように実装されているかを調べる場合は、\pages\mediaPlayer\mediaPlayer.js でアプリ バー ボタンのイベント ハンドラーを確かめてください。
	アプリのライフサイクルと状態を管理する アプリはいつでも中断されてバックグラウンドになり、システムにより終了される可能性があるため、Windows ストア アプリにアプリの状態を保存することは重要です。 アプリが再開したとき、ユーザーは通常メディアが同じ場所に存在し、すべてのアプリ設定が変わっていないことを期待します。 アプリの状態は、デバイス上の独立したストレージに保存することも、ローミング ストレージに保存することもできます。 ローミング ストレージは、ユーザーが複数のデバイスでアプリを実行しても、すべてのデバイスで状態が共有されるため、優れています。 保存する必要がある重要な video 状態は、src、currentTime、loop、paused、ended、autoplay と、選択した任意の audioTracks です。 navigation.js は、Visual Studio テンプレートの一部となっているヘルパー関数です。 空のテンプレート以外のすべてのテンプレートに含まれています。これらのヘルパー関数は、中断、再開、終了からの再開の処理を簡略化します。 一部のメディア状態は、メディアが読み込まれた後 (たとえば、currentTime など) に復元する必要があります。 サンプルで確認しましょう:\pages\mediaPlayer\mediaPlayer.js で app.oncheckpoint、navigationHelper_SaveState、restoreMediaState、mediaLoaded、appResumingFromSuspend の各関数を確かめてください。\js\default.js では、app.onactivated を確かめてください。
	アプリ設定のガイドライン JavaScript を使った Windows ストア アプリには、WinJS.UI.SettingsFlyout コントロールを使います。 設定は、アプリ全体の動作に影響するが、頻繁に設定されるわけではない構成オプションに使います。 メディア再生の概要サンプルでは、アプリ設定の保存に使うことができるオーディオ設定およびビデオ設定ポップアップが作られます。 サンプルで確認しましょう:\js\default.js で app.onactivated を確かめてください。 audio.html、video.html、help.html、privacy.html の設定ページは、\settings サブフォルダーにあります。

 

完成

	Windows アプリ認定キットの使用 推奨。Windows アプリ認定キットを実行すると、Windows ストア要件を満たすのに役立ちます。アプリに主要な機能を追加した場合は実行することをお勧めします。
	これで終わりです。 ここまでで、アプリのさまざまなメディア再生機能について確かめたので、メディア再生の概要サンプルに関するページにあるようなアプリを作ることができます。

 

その他の情報

Windows ストア アプリ UI の概要

Windows ストア アプリ UI の設計について詳しく説明します。

ユーザー操作の概要

Windows ストア アプリにタッチ入力を追加する方法について説明します。

JavaScript を使った Windows ストア アプリのためのロードマップ

JavaScript を使った Windows ストア アプリの作成の概要が説明されています。

アプリの UX の設計

優れたユーザー エクスペリエンスの設計について詳しく説明します。

サポートされるオーディオとビデオの形式

JavaScript を使った Windows ストア アプリでサポートされるオーディオ形式とビデオ形式について説明します。

オーディオとビデオのパフォーマンス

メディア アプリのパフォーマンスに関する考慮事項について説明します。

クイック スタート: WinJS コントロールとスタイルの追加

JavaScript を使った Windows ストア アプリでのコントロールとイベントについて説明します。

関連するサンプル

• HTML メディア再生のサンプル
• MediaHub サンプル アプリ
• メディア拡張機能のサンプル
• メディアのリモート再生のサンプル
• 電源状態の表示のサンプル
• 再生マネージャーのサンプル
• システム メディア トランスポート コントロールのサンプル
• 効果の検出のサンプル