Windows 8風格應用開發入門 二十一 構建簡單媒體播放器

《快速構建Windows 8風格應用20-MediaElement》博文中提到了如何使用MediaElement對象進行播放視頻的簡易功能，但是在實際應用中需要更複雜的功能，例如：控制視頻播放的控制項、全螢幕模式、進度條等等其他功能。

本篇博文中樣本使用應用程式中包含的媒體檔案，當然我們也可以通過網路或者本地[使用FileOpenPicker]進行載入某一媒體檔案。

MSDN中關於媒體播放器的範例程式碼下載地址：XAML media playback sample。

構建基本的MediaElement控制項

首先我們建立一個MediaElement控制項並添加到ContentControl對象中，這樣做的目的是為了啟用全盤模式功能。

XAML代碼如下：

<ContentControl x:Name="videoContainer" KeyUp="VideoContainer_KeyUp" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"  Height="400" Grid.Row="0" >                <MediaElement Name="videoMediaElement" Source="Video/Azure_Tmobile_500k.wmv"                                MediaOpened="videoElement_MediaOpened"                                MediaEnded="videoMediaElement_MediaEnded"                                MediaFailed="videoMediaElement_MediaFailed"                              CurrentStateChanged="videoMediaElement_CurrentStateChanged"                              PosterSource="Media/1.png"                              AutoPlay="False" />    </ContentControl>

MediaElement控制項的Source屬性指向要播放的音頻或視頻檔案。，該屬性可以設定為應用中的某一檔案的URI或網路上的檔案的 URI。當然我們也可以使用 SetSource 方法將源設定為使用 FileOpenPicker 對象從本地系統檢索的檔案。

AutoPlay屬性指定是否在載入 MediaElement 後開始播放媒體檔案，預設值為 true。

MediaElement控制項聲明了MediaOpened、MediaEnded、CurrentStateChanged和 MediaFailed 事件。

最後設定PosterSource屬性值，PosterSource是一個映像，它在媒體載入前為MediaElement控制項提供視覺展示。

通常PosterSource在以下情況下顯示：

1）未設定有效源，例如：未設定Source、Source設定為Null、或源無效；

2）載入媒體時；

3）“播放至”流式播放期間；

構建控制MediaElement播放控制項

一般控制MediaElement播放包括播放，停止和暫停等功能。

常用控制MediaElement播放功能包括：

1）停止：調用 Stop 方法；

2）暫停：調用 Pause 方法；

3）快進：將MediaElement控制項的DefaultPlaybackRate屬性的值設定為 2.0，我們可以調整此值，以提高或降低快進的速率。 然後，處理常式調用 Play 方法；

4）快退：將MediaElement控制項的DefaultPlaybackRate屬性的值設定為 -2.0，我們可以調整此值，以提高或降低快退的速率。然後，處理常式調用 Play 方法；

5）播放：如果MediaElement控制項的DefaultPlaybackRate屬性值不是 1.0，則將DefaultPlaybackRate 設定為 1.0。然後，處理常式調用 Play 方法。

6）靜音：在 true 和false 間切換 IsMuted 屬性；

7）音量增加、音量降低：如果IsMuted為true，則取消音量靜音，然後處理常式按 0.1 增加或降低Volume屬性。 注意：音量層級範圍從 0.0 到 1.0；

對應這些控制功能的XAML代碼可如下：

<StackPanel Orientation="Horizontal">       <Button Name="btnPlay" Click="btnPlay_Click"            Style="{StaticResource transportStyle}" Content="Play" />       <Button Name="btnPause" Click="btnPause_Click"            Style="{StaticResource transportStyle}" Content="Pause" />       <Button Name="btnStop" Click="btnStop_Click"            Style="{StaticResource transportStyle}" Content="Stop" />       <Button Name="btnReverse" Click="btnReverse_Click"            Style="{StaticResource transportStyle}" Content="Rewind" />       <Button Name="btnForward" Click="btnForward_Click"            Style="{StaticResource transportStyle}" Content="Forward" />       <Button Name="btnMute" Click="btnMute_Click"            Style="{StaticResource transportStyle}" Content="Mute" />       <Button Name="btnFullScreenToggle" Click="btnFullScreenToggle_Click"            Style="{StaticResource transportStyle}" Content="Full" />       <ComboBox Name="cbAudioTracks"              SelectionChanged="cbAudioTracks_SelectionChanged"              Width="75" />       <Button Name="btnVolumeUp" Click="btnVolumeUp_Click"            Style="{StaticResource transportStyle}" Content="-" />       <Button Name="btnVolumeDown" Click="btnVolumeDown_Click"            Style="{StaticResource transportStyle}" Content="+" />       <TextBlock Name="txtVolume" FontSize="14"               Text="{Binding Volume, ElementName=videoMediaElement}"               VerticalAlignment="Center" HorizontalAlignment="Right" />   </StackPanel>