共用方式為


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

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

了解如何為 Windows 8.1 建立功能豐富的媒體應用程式,這些應用程式不但可播放音訊和視訊,還能節省電池使用時間並提供最佳化呈現。

我們將從開始到完成,複習如何使用 JavaScript 建立搭載媒體功能的 Windows 市集應用程式。Windows 8.1 有許多讓這項工作變得比以前更為簡單的改善措施,例如新的 msRequestFullscreen API。我們將複習:

  • 媒體播放基本功能:例如使用 audiovideo HTML 元素、啟用傳輸控制項,以及從裝置或網路載入媒體檔案。
  • 媒體播放功能:例如適當防止螢幕變暗、在背景播放音訊、與系統媒體傳輸控制項互動、調整視訊大小、建立自訂傳輸控制項,以及啟用完整視窗呈現。
  • 應用程式基本功能:例如保留應用程式狀態、在應用程式列上建立 UI,以及建立 [設定] 飛出視窗。

如果您是使用 JavaScript 開發 Windows 市集應用程式的新手,請查看使用 JavaScript 建立您的第一個 Windows 市集應用程式跟上進度。

下方的每個步驟都會連結到含有範例和程式碼的做法主題,因此,如果您想要更多資訊,請連結到那些主題。

媒體播放,從開始到完成範例包含我們在這裡提到的所有事項。我們將會經常參考這個隨附範例,並為您指出當中實作特定功能的地方。

媒體播放範例應用程式的螢幕擷取畫面

建立媒體應用程式

開始圖示

建立您的範例

如果您想要依照這裡的步驟將媒體功能新增到自己的應用程式,可以從單層瀏覽,從開始到完成主題和關聯的單層瀏覽模式範本著手。或者,您也可以在 Microsoft Visual Studio 中建立空白的 Windows 市集應用程式專案或瀏覽專案。雖然隨附範例的瀏覽結構很簡單,但是它使用了 navigation.js, 中的一些協助程式函式,而這些函式並未包含在空白範例中。因此,從其中一個瀏覽範本開始著手並移除您不想要的部分,會是較容易的做法。

或是直接跳到媒體播放,從開始到完成隨附範例。

隨附範例實作了這裡所有的步驟,但為了繼續進行後續階段,我們將不會一一演練程式碼。每個步驟都有一個 "在範例中尋找" 區段,可協助您快速尋找程式碼。

範例來源檔案的結構很簡單且平面,因此您不需要在來源檔案中向下切入多層就可以輕鬆尋找程式碼。 但是您可能會偏好以不同的方式拆解並組織您自己的專案。

 

媒體播放基本功能

步驟圖示

快速入門:在應用程式中播放視訊

設定應用程式中視訊的基本功能。 這個做法主題會提供這項做法的相關詳細資料,但是若要取得基本的音訊和視訊播放功能,只要將 audiovideo 元素新增到您的 HTML 中並將 src 屬性設定成媒體檔案即可。

若要控制媒體播放,請將 controls 屬性新增到 audiovideo 元素,以使用內建的傳輸控制項。藉由將 controls 屬性設定成 truefalse,即可啟用和停用這些控制項。傳輸控制項提供常見的媒體 UI 元素,例如播放按鈕和音量按鈕。 以下是這些控制項在範例中看起來的樣子。

顯示含傳輸控制項之 MediaElement 的範例應用程式螢幕擷取畫面

在範例中尋找:video 元素的名稱為 mediaVideo,並且是在 \pages\mediaPlayer\mediaPlayer.js 檔案的 HTML 中定義。

步驟圖示

支援的音訊與視訊格式

使用 JavaScript 的 Windows 市集應用程式支援眾多的音訊和視訊格式。 按一下連結可取得完整的清單。

步驟圖示

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

既然有了媒體播放功能,讓我們一起來設定應用程式執行時的媒體來源。

FileOpenPicker 控制項可以讓使用者從本機檔案系統或 Microsoft OneDrive 選取檔案。這個步驟示範如何設定 FileOpenPicker,以及如何將 video.src 屬性設定成 FileOpenPicker 所傳回的檔案。

使用 StorageApplicationPermissions.futureAccessList 儲存以 FileOpenPicker 開啟之檔案的權限。 然後,您的應用程式便可在之後存取這些檔案,例如在應用程式從終止狀態還原的時候。

FileOpenPicker 看起來就像這樣。

FileOpenPicker 控制項的螢幕擷取畫面

FileOpenPicker 並不會要求您的應用程式宣告系統資料夾 (例如 [音樂]、[影片] 以及 [文件]) 的功能。這是因為使用者可以完全控制 FileOpenPicker 和要開啟哪些檔案。 基於安全性和隱私權目的,您的應用程式宣告的功能應該越少越好。 但是,如果您希望讓應用程式不需使用者輸入即可存取 [影片] 和 [音樂] 資料夾—例如顯示 [音樂] 資料夾中的所有專輯封面—就必須宣告對應的功能。如需詳細資訊,請參閱應用程式功能宣告

在範例中尋找:請查看 \pages\mediaPlayer\mediaPlayer.js 中的 setMediaSourceFromFilePickersetMediaSourceFromFile 函式,以及 \pages\mediaPlayer\mediaPlayer.html 中的 browseButton 應用程式列按鈕。

步驟圖示

如何開啟網路上的媒體檔案

FileOpenPicker 控制項適合用於取得本機系統上的檔案,但無法將媒體來源設定成網路上的檔案。若要這麼做,只要將 src 設定成網路上媒體檔案的路徑即可。

在範例中尋找:請查看 \pages\mediaPlayer\mediaPlayer.js 中的 setMediaSourceFromTextBoxsetMediaSourceFromPath 函式。另外,也請查看 \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.definesetupSystemMediaTransportControls 以及 systemMediaControlsButtonPressed 函式。另外,也請參閱 \pages\mediaPlayer\mediaPlayer.js 中的 mediaPlayingmediaPaused 以及 mediaEnded 事件處理常式。

步驟圖示

如何在背景播放音訊

現在,讓我們來設定背景音訊支援,以便讓使用者在與其他應用程式互動時,仍可使用您的應用程式聆聽音樂。

當播放音訊的應用程式移到背景 (例如當使用者切換到其他應用程式) 時,預設行為是停止音訊。 但是音樂應用程式可以選擇繼續播放音訊。

若要在背景播放音訊,您必須在應用程式資訊清單的 Declarations 區段中設定背景音訊工作。 還必須在 SystemMediaTransportControls 上啟用 isPlayEnabledisPauseEnabled 屬性,並處理 buttonpressed 事件。這是必要的做法,可以讓使用者在您的應用程式並非使用中應用程式時,仍然能夠播放和停止音訊。

在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.html 中的 video 元素、\pages\mediaPlayer\mediaPlayer.html 中的 setupSystemMediaTransportControls 函式,以及查看 package.appmanifest.xml 的 Declarations 區段以啟用背景工作。

步驟圖示

如何啟用完整視窗呈現

audiovideo 物件的內建傳輸控制項有一個完整視窗按鈕。 但是如果您想要透過程式設計方式啟用或停用完整視窗呈現,請使用 msRequestFullscreen 函式。

在 Windows 8.1 之前的版本中,您必須計算完整視窗的邊界,然後自行顯示或隱藏其他 UI。如果沒有以正確的方式執行這項工作,可能就無法啟用某些在呈現上的最佳化。 因此,請一律使用 msRequestFullscreen 函式來啟用和停用完整視窗呈現 (而且這也是較容易的做法)。

在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.js 中的 fullScreenMedia 函式。

步驟圖示

如何建立自訂傳輸控制項

如果您需要在 audiovideo 傳輸控制項提供的功能上進行擴充,或是想要完全取代這些功能,就必須建立自訂傳輸控制項。 媒體播放,從開始到完成範例在 AppBar 上實作了所有自訂傳輸控制項,但是仍然讓內建傳輸控制項保持啟用。 如果您正在建立自己的自訂傳輸控制項,可能會偏好以自己的控制項取代內建的 UI。

若要關閉內建傳輸控制項,請將 controls 設定成 false

這個做法主題涵蓋建立適用於播放、暫停、停止、向前快轉、倒轉、位置滑桿、完整視窗、音訊區段、靜音以及音量的自訂傳輸控制項。

在範例中尋找:請參閱 \pages\mediaPlayer\mediaPlayer.html 中的 AppBar 元素,以及參閱 \pages\mediaPlayer\mediaPlayer.js,找出實作這些功能的事件處理常式。

 

應用程式基本功能

步驟圖示

新增應用程式列

使用 WinJS.UI.AppBar 將與應用程式互動的 UI 以及 audiovideo 物件放置在應用程式列上。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 狀態包括 srccurrentTimelooppausedendedautoplay 以及任何選取的 audioTracks

navigation.js 是 Visual Studio 範本所含的協助程式函式。 它們包含在除了空白範本以外的所有範本中。這些協助程式函式可以簡化暫停、繼續以及終止後繼續的處理。

有些媒體狀態應該在媒體載入—例如 currentTime 之後才進行還原。

在範例中尋找:請查看 \pages\mediaPlayer\mediaPlayer.js 中的 app.oncheckpointnavigationHelper_SaveStaterestoreMediaStatemediaLoaded 以及 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 市集應用程式中的控制項和事件。

相關範例