Language: HTML | XAML

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

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

我們將從開始到完成,複習如何使用 C++、C# 或 Visual Basic 建立搭載媒體功能的 Windows 市集應用程式。Windows 8.1 有許多讓這項工作變得比以前更為簡單的改善措施,例如 MediaElement 類別的新傳輸控制項。我們將涵蓋這些內容,另外再加上:

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

如果您是使用 C++、C# 或 Visual Basic 開發 Windows 市集應用程式的新手,請查看使用 C# 或 Visual Basic 建立您的第一個 Windows 市集應用程式跟上進度。

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

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

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

建立媒體應用程式

開始圖示

建立您的範例

如果您想要依照這裡的步驟將媒體功能新增到自己的應用程式,可以在 Microsoft Visual Studio 中建立一個空白的 Windows 市集應用程式專案,然後新增一個基本項目。 該基本項目會自動包含有用的協助程式類別,例如 SuspensionManager.cs,這個類別可以簡化應用程式狀態儲存及應用程式暫停和取消暫停處理。若要新增基本項目,請在 Visual Studio 中選取 [專案] > [加入新項目] > [基本項目]

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

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

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

 

媒體播放基本功能

步驟圖示

播放音訊和視訊基本功能

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

MediaElement 類別可以播放視訊和音訊。

為了控制媒體播放,Windows 8.1 導入了新的內建傳輸控制項。藉由設定 AreTransportControlsEnabled 屬性,即可啟用和停用這些控制項。傳輸控制項提供常見的媒體 UI 元素,例如播放按鈕和音量按鈕。 以下是這些控制項在範例中看起來的樣子。

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

在範例中尋找:MediaElement 的名稱為 media,並且是在 MainPage.xaml 檔案的 XAML 中定義。

步驟圖示

支援的音訊與視訊格式

使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式支援眾多的音訊和視訊格式。 按一下連結可取得完整的清單。

步驟圖示

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

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

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

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

FileOpenPicker 看起來就像這樣。

FileOpenPicker 控制項的螢幕擷取畫面

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

在範例中尋找:請查看 MainPage.xaml.cs 中的 Browse_ClickSetMediaSourceFromFile 方法,以及 MainPage.xaml 中的 appBarTextBoxFilePath TextBlock

步驟圖示

如何播放網路上的媒體檔案

FileOpenPicker 控制項適合用於取得本機系統上的檔案,但無法將媒體來源設定成網路上的檔案。若要這麼做,請為媒體檔案路徑建立 Uri 物件,然後將 MediaElement.Source 設定成該物件。

攔截設定媒體來源之程式碼的相關例外狀況是相當好的做法。

在範例中尋找:請查看 MainPage.xaml.cs 中的 AppBarTextBoxFilePath_KeyUpSetMediaSourceFromPath 方法。另外,也請參閱 MainPage.xaml 之 XAML 中的 appBarTextBoxFilePath TextBlock,這是用來輸入媒體路徑。

 

媒體播放功能

步驟圖示 如何在音訊和視訊播放期間讓顯示器保持開啟

一般而言,當 Windows 市集應用程式在一段特定時間內沒有偵測到使用者輸入時,螢幕就會變暗,並且最後會關閉。 在大多數應用程式中,這是件好事,因為這樣可以節省能源和電池使用時間。但是在許多媒體應用程式中,我們並不想讓顯示器變暗,因為可能有使用者正在觀看視訊。

請使用 System.Windows.Display.DisplayRequest 類別告訴系統針對您的應用程式讓顯示器永遠保持開啟。但是一旦您的應用程式不再有這項需求時 (例如當應用程式暫停、媒體播放完畢或媒體暫停時),請務必取消這項要求。 如果不取消這項要求,將會浪費電池使用時間。

如果是透過新 MediaElement 傳輸控制項上的完整視窗按鈕或透過 IsFullWindow 屬性來啟用完整視窗呈現,系統將會自動處理螢幕變暗功能的停用和重新啟用。因此,如果您的應用程式只有在完整視窗模式下才需要停用螢幕變暗功能,您就不需要自行管理 DisplayRequest

在範例中尋找:請參閱 MainPage.xaml.cs 中的 DisableScreenDimmingUpdateMediaState 方法。

步驟圖示

如何使用系統媒體傳輸控制項

Windows 8.1 導入了一個與系統媒體傳輸控制項互動的新類別。從現在開始,請使用 SystemMediaTransportControls 取代舊的 MediaControl 類別。

系統媒體傳輸控制項與 MediaElement 物件上的傳輸控制項不同。 這些是在使用者按下硬體媒體鍵 (例如耳機上的音量控制或某些鍵盤上的媒體按鈕) 時,以快顯方式顯示的控制項。 您的應用程式可以登錄使用這些控制項,甚至可以傳回要由它們顯示的媒體中繼資料,例如專輯封面或歌曲標題。

以下是這些控制項的外觀。

系統媒體傳輸控制項的螢幕擷取畫面

在範例中尋找:請參閱 MainPage.xaml.cs 中的 MainPage 建構函式以及 systemControls_ButtonPressedUpdateMediaState 方法。

步驟圖示

如何在背景播放音訊

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

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

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

在範例中尋找:請參閱 MainPage.xaml.cs 中的 MainPage 建構函式以及 EnableBackGroundAudiosystemControls_ButtonPressed 方法。最後,請查看 Package.appmanifest.xml 的 Declarations 區段來啟用背景工作。

步驟圖示

如何調整視訊大小和延展視訊

MediaElement.Stretch 屬性定義 MediaElement 填入所在容器之空間的方式。Stretch 狀態與許多電視機上的影像大小設定類似。您可以將這個屬性連接到某個 UI 按鈕,然後讓使用者選擇他們偏好的設定。

  • None 會以原始大小顯示內容的原生解析度。
  • Uniform 會盡可能地填滿空間,同時維持影像內容的外觀比例。這會導致視訊邊緣出現水平或垂直的黑色長條。這和寬螢幕模式類似。
  • UniformToFill 會填滿個空間,同時維持外觀比例。這會導致部分影像被裁切。這和全螢幕模式類似。
  • Fill 會填滿整個空間,但不會維持外觀比例。 影像不會被裁切,但可能發生延展現象。這和延展模式類似。

以下是這些延展值如何影響視訊呈現的範例。

不同延展值的呈現方式範例

在範例中尋找:請參閱 MainPage.xaml.cs 中的 PictureSize_Click 方法。

步驟圖示

如何啟用完整視窗呈現

MediaElement 類別的內建傳輸控制項有一個完整視窗按鈕。 但是如果您想要透過程式設計方式啟用或停用完整視窗呈現,請使用新的 IsFullWindow 屬性。

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

在範例中尋找:請參閱 MainPage.xaml.cs 中的 ToggleFullWindow 方法。

步驟圖示

如何建立自訂傳輸控制項

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

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

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

在範例中尋找:請參閱 MainPage.xaml 中的 <Page.BottomAppBar> 元素,以及參閱 MainPage.xaml.cs,找出實作這些功能的事件處理常式。實作時間軸位置滑桿的自訂控制項佔據程式碼的大部分,並且全部都在 MainPage.xaml.cs 的最後。

 

應用程式基本功能

步驟圖示

新增應用程式列

將與應用程式和 MediaElement 互動的 UI 放置在 AppBar 上。AppBarButtonAppBarToggleButton 控制項是特別針對 AppBar 建置的,而且運作良好。

Symbol 類別包含大量可用於 AppBarButton.Icon 的符號。您也可以提供自己的圖示,或使用來自 Segoe UI Symbol 圖示清單的圖示。隨附範例中的所有按鈕都是使用來自 Symbol 的圖示。

以下是底部 AppBar 在隨附範例中看起來的樣子。

顯示含 AppBarButtons 的 AppBar

隨附範例會將一些相關的功能 (例如影像和音訊按鈕) 聚集在 Flyout 中。 這樣有助於節省空間。

如需有關使用 AppBar 和設計應用程式的資訊,請參閱應用程式列的指導方針

在範例中尋找:請參閱 MainPage.xaml 以及 <Page.TopAppBar><Page.BottomAppBar>。 如果您想要了解特定控制項和功能的實作方式,請查看 MainPage.xaml.cs 中應用程式列按鈕的事件處理常式。

步驟圖示

讓 UI 產生動畫效果

動畫效果可以讓您的應用程式看起來更活潑。 即使是微小的動畫效果也會讓您的應用程式更為顯眼。建立基本動畫效果很簡單,而系統也提供一些內建的漸進式動畫效果。

媒體播放,從開始到完成範例在文字訊息上建立了一個簡單的淡出動畫效果。 它在 TextBlockOpacity 屬性上使用了 StoryboardDoubleAnimation。這會使文字在幾秒後淡出。

漸進式動畫效果 (例如 EntranceThemeTransition) 可以提供視覺提示來告知使用者應用程式狀態已經變更。 隨附應用程式在一些 AppBarButton 物件上使用了 EntranceThemeTransition,可在應用程式列開啟時賦予這些物件一些動作。

效能注意事項:請勿讓實際的 MediaElement 物件產生動畫效果。 這會對效能造成負面影響。

在範例中尋找:請參閱 MainPage.xaml 中的 <Page.Resources>,以及 MainPage.xaml.cs 中的 DisplayMessage 方法。

步驟圖示

管理應用程式週期與狀態

在 Windows 市集應用程式中儲存應用程式狀態相當重要,因為您的應用程式隨時可能因暫停而移到背景中,然後由系統終止。 當應用程式繼續執行時,使用者會預期媒體位於先前相同的位置,並且所有應用程式設定都保持不變。

您可以將應用程式狀態儲存到裝置上的隔離儲存區,或是儲存到漫遊儲存區。 漫遊儲存區是個不錯的選擇,因為它可以讓使用者在多個裝置上執行您的應用程式,而又可以在這些裝置之間共用應用程式狀態。

要儲存的重要 MediaElement 狀態包括 SourcePositionStretchIsLoopingCurrentStateAutoPlay 以及 AudioStreamIndex

SuspensionManager.cs 和 NavigationHelper.cs 是 Visual Studio 範本所含的協助程式類別。 它們包含在除了空白範本以外的所有範本中。 如果您建立空白範本,Visual Studio 會在您將新基本項目新增到專案中時,自動新增這些檔案。這些協助程式類別可以簡化暫停、繼續以及終止後繼續的處理。請參閱 NavigationHelper.cs 中的 LoadStateSaveState 方法。

有些 MediaElement 狀態應該在 MediaOpen 事件處理常式中還原,例如 MediaElement.Position。 這是因為必須先將媒體載入,才能設定這些屬性。例如,NaturalDuration 是在媒體載入後設定,而 Position 屬性不可大於 NaturalDuration,因此您必須在設定 NaturalDuration 之後才設定 Position

在範例中尋找:請參閱 MainPage.xaml.cs 中的 navigationHelper_LoadStatenavigationHelper_SaveStateMedia_MediaOpened 以及 RestoreMediaSourceState 方法。在 App.xaml.cs 中,請查看 App 建構函式、OnLaunched 以及 OnSuspending,找出 SuspensionManager 設定和暫停程式碼。

步驟圖示

應用程式設定的指導方針

Windows 8.1 針對使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式導入了 SettingsFlyout 控制項。 SettingsFlyout 簡化了設定頁面的建立。

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

在範例中尋找:請參閱 App.xaml.cs 中的 OnLaunchedOnCommandsRequested 方法進行設定。 而每個 [設定] 飛出視窗在 App.xaml.cs 中都有一個對應的 Show 方法,例如 ShowAudioSettingsFlyout。 AudioSettings.xaml、VideoSettings.xaml、HelpSettings.xaml 以及 PrivacySettings.xaml 飛出視窗皆位於 Settings 子資料夾中。

 

完成

市集需求圖示

使用 Windows 應用程式認證套件

建議使用。執行 Windows 應用程式認證套件可協助您確保應用程式符合 Windows 市集需求。建議您在每次為應用程式新增主要功能時執行這個套件。

停止圖示

大功告成! 既然您已經探索了應用程式適用的各種不同媒體播放功能,現在即可建立一個像是媒體播放,從開始到完成範例的應用程式。

 

想要更深入了解嗎?

Windows 市集應用程式 UI,從開始到完成 (XAML)

深入了解如何設計 Windows 市集應用程式 UI。

使用者互動,從開始到完成 (XAML)使用者互動自訂,從開始到完成 (XAML)

深入了解如何將觸控輸入新增到 Windows 市集應用程式。

使用 C# 和 Visual Basic 建立 Windows 執行階段應用程式的藍圖使用 C++ 建立 Windows 執行階段應用程式的藍圖

深入了解一般如何建立應用程式。

設計應用程式的 UX

深入了解如何設計絕佳的使用者經驗。

支援的音訊與視訊格式

深入了解使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式中支援的音訊和視訊格式。

最佳化媒體資源

深入了解媒體應用程式的效能考量。

快速入門:新增控制項和處理事件

深入了解使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式中的控制項和事件。

相關範例

 

 

顯示:
© 2015 Microsoft