媒體播放,從開始到完成 (HTML)
[ 本文的目標對象是撰寫 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 中的 |
|
FileOpenPicker 控制項適合用於取得本機系統上的檔案,但無法將媒體來源設定成網路上的檔案。若要這麼做,只要將 src 設定成網路上媒體檔案的路徑即可。 在範例中尋找:請查看 \pages\mediaPlayer\mediaPlayer.js 中的 |
媒體播放功能
如何在音訊和視訊播放期間讓顯示器保持開啟
一般而言,當 Windows 市集應用程式在一段特定時間內沒有偵測到使用者輸入時,螢幕就會變暗,並且最後會關閉。 在大多數應用程式中,這是件好事,因為這樣可以節省能源和電池使用時間。但是在許多媒體應用程式中,我們並不想讓顯示器變暗,因為可能有使用者正在觀看視訊。 請使用 System.Windows.Display.DisplayRequest 類別告訴系統針對您的應用程式讓顯示器永遠保持開啟。但是一旦您的應用程式不再有這項需求時 (例如當應用程式暫停、媒體播放完畢或媒體暫停時),請務必取消這項要求。 如果不取消這項要求,將會浪費電池使用時間。 如果是透過內建傳輸控制項上的完整視窗按鈕或透過 msRequestFullscreen 函式來啟用完整視窗呈現,系統將會自動處理螢幕變暗功能的停用和重新啟用。因此,如果您的應用程式只有在完整視窗模式下才需要停用螢幕變暗功能,您就不需要自行管理 DisplayRequest。 在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.js 中的 |
|
Windows 8.1 導入了一個與系統媒體傳輸控制項互動的新類別。從現在開始,請使用 SystemMediaTransportControls 取代舊的 MediaControl 類別。 系統媒體傳輸控制項與 HTML 媒體物件上的傳輸控制項不同。 這些是在您按下硬體媒體鍵 (例如耳機上的音量控制或某些鍵盤上的媒體按鈕) 時,以快顯方式顯示的控制項。 您的應用程式可以登錄使用這些控制項,甚至可以傳回要由它們顯示的媒體中繼資料,例如專輯封面或歌曲標題。 以下是這些控制項的外觀。 在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.js 中的 |
|
現在,讓我們來設定背景音訊支援,以便讓使用者在與其他應用程式互動時,仍可使用您的應用程式聆聽音樂。 當播放音訊的應用程式移到背景 (例如當使用者切換到其他應用程式) 時,預設行為是停止音訊。 但是音樂應用程式可以選擇繼續播放音訊。 若要在背景播放音訊,您必須在應用程式資訊清單的 Declarations 區段中設定背景音訊工作。 還必須在 SystemMediaTransportControls 上啟用 isPlayEnabled 和 isPauseEnabled 屬性,並處理 buttonpressed 事件。這是必要的做法,可以讓使用者在您的應用程式並非使用中應用程式時,仍然能夠播放和停止音訊。 在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.html 中的 video 元素、\pages\mediaPlayer\mediaPlayer.html 中的 |
|
audio 和 video 物件的內建傳輸控制項有一個完整視窗按鈕。 但是如果您想要透過程式設計方式啟用或停用完整視窗呈現,請使用 msRequestFullscreen 函式。 在 Windows 8.1 之前的版本中,您必須計算完整視窗的邊界,然後自行顯示或隱藏其他 UI。如果沒有以正確的方式執行這項工作,可能就無法啟用某些在呈現上的最佳化。 因此,請一律使用 msRequestFullscreen 函式來啟用和停用完整視窗呈現 (而且這也是較容易的做法)。 在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.js 中的 |
|
如果您需要在 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 在隨附範例中看起來的樣子。 隨附範例使用飛出視窗來執行曲目選擇控制和音量控制。 這樣有助於節省空間。 如需有關使用 AppBar 和設計應用程式的資訊,請參閱應用程式列的指導方針。 在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.html 中的 |
|
在 Windows 市集應用程式中儲存應用程式狀態相當重要,因為您的應用程式隨時可能因暫停而移到背景中,然後由系統終止。 當應用程式繼續執行時,使用者通常會預期媒體位於先前相同的位置,並且所有應用程式設定都保持不變。 您可以將應用程式狀態儲存到裝置上的隔離儲存區,或是儲存到漫遊儲存區。 漫遊儲存區是個不錯的選擇,因為它可以讓使用者在多個裝置上執行您的應用程式,而又可以在這些裝置之間共用應用程式狀態。 要儲存的重要 video 狀態包括 src、currentTime、loop、paused、ended、autoplay 以及任何選取的 audioTracks。 navigation.js 是 Visual Studio 範本所含的協助程式函式。 它們包含在除了空白範本以外的所有範本中。這些協助程式函式可以簡化暫停、繼續以及終止後繼續的處理。 有些媒體狀態應該在媒體載入—例如 currentTime 之後才進行還原。 在範例中尋找:請查看 \pages\mediaPlayer\mediaPlayer.js 中的 |
|
將 WinJS.UI.SettingsFlyout 控制項用於使用 JavaScript 的 Windows 市集應用程式。 設定是針對會影響應用程式整體行為的設定選項,以及只有偶爾才會調整的設定選項。 媒體播放,從開始到完成範例建立了一個可用來儲存應用程式設定的 [音訊設定與視訊設定] 飛出視窗。 在範例中尋找:請查看 \js\default.js 中的 |
完成
建議使用。執行 Windows 應用程式認證套件可協助您確保應用程式符合 Windows 市集需求。建議您在每次為應用程式新增主要功能時執行這個套件。 |
|
大功告成! 既然您已經探索了應用程式適用的各種不同媒體播放功能,現在即可建立一個像是媒體播放,從開始到完成範例的應用程式。 |
想要更深入了解嗎?
深入了解如何設計 Windows 市集應用程式 UI。
深入了解如何將觸控輸入新增到 Windows 市集應用程式。
使用 JavaScript 建立 Windows 市集應用程式的藍圖
深入了解一般如何使用 JavaScript 建立 Windows 市集應用程式。
深入了解如何設計絕佳的使用者經驗。
深入了解使用 JavaScript 的 Windows 市集應用程式中支援的音訊和視訊格式。
深入了解媒體應用程式的效能考量。
深入了解使用 JavaScript 的 Windows 市集應用程式中的控制項和事件。