媒體播放，從開始到完成 (HTML)

發行項
12/11/2015

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

了解如何為 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 導入了一個與系統媒體傳輸控制項互動的新類別。從現在開始，請使用 SystemMediaTransportControls 取代舊的 MediaControl 類別。系統媒體傳輸控制項與 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。若要關閉內建傳輸控制項，請將 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 在隨附範例中看起來的樣子。

顯示含 AppBarButtons 的 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。

應用程式設定的指導方針

將 WinJS.UI.SettingsFlyout 控制項用於使用 JavaScript 的 Windows 市集應用程式。

設定是針對會影響應用程式整體行為的設定選項，以及只有偶爾才會調整的設定選項。媒體播放，從開始到完成範例建立了一個可用來儲存應用程式設定的 [音訊設定與視訊設定] 飛出視窗。

在範例中尋找：請查看 \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 市集應用程式中的控制項和事件。

	快速入門：在應用程式中播放視訊設定應用程式中視訊的基本功能。這個做法主題會提供這項做法的相關詳細資料，但是若要取得基本的音訊和視訊播放功能，只要將 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 導入了一個與系統媒體傳輸控制項互動的新類別。從現在開始，請使用 SystemMediaTransportControls 取代舊的 MediaControl 類別。系統媒體傳輸控制項與 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。若要關閉內建傳輸控制項，請將 controls 設定成 false。這個做法主題涵蓋建立適用於播放、暫停、停止、向前快轉、倒轉、位置滑桿、完整視窗、音訊區段、靜音以及音量的自訂傳輸控制項。在範例中尋找：請參閱 \pages\mediaPlayer\mediaPlayer.html 中的 AppBar 元素，以及參閱 \pages\mediaPlayer\mediaPlayer.js，找出實作這些功能的事件處理常式。