Response.Write("Hello LOLOTA")

今天我們來介紹Silverlight的Media控制項。透過這控制項可以讓我們播放美女寫真影片、家庭娛樂片、宅宅卡通片、音樂mp3..等。

這個控制項支援的格式有下列幾種：

Media格式：

WMV1: Windows Media Video 7
WMV2: Windows Media Video 8
WMV3: Windows Media Video 9
WMVA: Windows Media Video Advanced Profile (non-VC-1)

WMVC1: Windows Media Video Advanced Profile (VC-1)
ASX: Advanced Stream Redirector files; 副檔名可以是 .asx, .wax, .wvx, .wmx, or .wpl
 

支援的Audio格式：

WMA 7: Windows Media Audio 7
WMA 8: Windows Media Audio 8
WMA 9: Windows Media Audio 9
MP3: ISO/MPEG Layer-3; 8 to 320Kbps and variable bit rate; 8 to 48KHz sampling frequencies

 

要如何使用它呢？

1.

首先，我們可以新增一個專案 - SL_D11，然後在專案的Page.Xaml中輸入下列Xaml程式碼：

<UserControl x:Class="SL_D11.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <MediaElement x:Name="Media1" AutoPlay="True" Width="350" Height="300" Source="http://silverlight.services.live.com/17942/silverlight/video.wmv"> </MediaElement> </Grid> </UserControl>

 

在這程式碼裡，我們新增了一個MediaElement，然後指定它的寬跟高，以及來源 -

Source=http://silverlight.services.live.com/17942/silverlight/video.wmv

 

2.

按下F5執行。

我們可以看到執行結果如上圖，但是播放一次就沒了，如果要循環播放要怎麼處理？

 

在WPF，可以使用StoryBoard的MediaTimeLine物件的RepeatBehavior屬性，將它設定成「Forever」。

但是在Silverlight裡，要怎麼處理這個問題？肯定的是，這裡沒有這個屬性可以讓我們設定值。

在MediaElement物件中，有一個播放完畢會觸發的事件 - 「Media_Ended事件」，如果我們在這個事件內被觸發時，

在其事件中在寫入播放影片的程式碼，這樣是不是就能循環播放了? OK...Let's  try it!

 

3.

在MediaEmenet的Media_Ended事件中，加入下列程式碼：

 

 

4.

按下F5執行，在影片播放完畢後，竟然沒有在播放一次，這，其中一定是有什麼誤會....Orz

檢查了一下，發現可能是忘記告訴MediaElement事件要從哪裡開始播放，所以我們加入下列程式碼：

private void Media1_MediaEnded(object sender, RoutedEventArgs e) { Media1.Position = TimeSpan.FromMilliseconds(0); Media1.Play(); }

 

5.

按下F5執行。這次總算可以順利的執行循環播放了。

 

6.

接下來，我們來實做一些基本功能 - 播放、暫停、停止以及全螢幕等功能。

設定Xaml程式碼為：

<UserControl x:Class="SL_D11.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <MediaElement x:Name="Media1" AutoPlay="False" Width="350" Source="http://silverlight.services.live.com/17942/silverlight/video.wmv" MediaEnded="Media1_MediaEnded" Margin="25,0,25,108"/> <Button x:Name="PLAY" Click="PLAY_Click" Height="24" HorizontalAlignment="Left" Margin="25,0,0,52" VerticalAlignment="Bottom" Width="72" Content="播放"/> <Button x:Name="PAUSE" Click="PAUSE_Click" Height="24" HorizontalAlignment="Left" Margin="120,0,0,52" VerticalAlignment="Bottom" Width="72" Content="暫停"/> <Button x:Name="RESUME" Click="RESUME_Click" Height="24" Margin="0,0,120,52" VerticalAlignment="Bottom" Content="繼續" Width="72" HorizontalAlignment="Right"/> <Button x:Name="STOP" Click="STOP_Click" Height="24" HorizontalAlignment="Right" Margin="0,0,32,52" VerticalAlignment="Bottom" Width="72" Content="停止"/> <Button x:Name="FULLSCREEN" Click="FULLSCREEN_Click" Height="24" HorizontalAlignment="Left" Margin="25,0,0,8" VerticalAlignment="Bottom" Width="72" Content="全螢幕"/> </Grid> </UserControl>

其中設定四個按鈕，分別處理播放、暫停、停止以及全螢幕這些功能。(這裡我們將MediaElement的AutoPlay屬性設定為False。

然後在對應按鈕的Click事件中，輸入程式碼：

private void PLAY_Click(object sender, RoutedEventArgs e) { Media1.Play(); } private void PAUSE_Click(object sender, RoutedEventArgs e) { Media1.Pause(); } private void STOP_Click(object sender, RoutedEventArgs e) { Media1.Stop(); } private void FULLSCREEN_Click(object sender, RoutedEventArgs e) { Application.Current.Host.Content.IsFullScreen = true; }

 

7.

按下F5執行。

 

8.

接下來，我們來動態指定檔案來源。

在畫面中放入兩個TextBox，然後設定其ID：

<UserControl x:Class="SL_D11.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="448" Height="344"> <Grid x:Name="LayoutRoot" Background="White"> <MediaElement x:Name="Media1" AutoPlay="False" Width="350" Source="" MediaEnded="Media1_MediaEnded" Margin="25,0,73,152"/> <Button x:Name="PLAY" Click="PLAY_Click" Height="24" HorizontalAlignment="Left" Margin="25,0,0,96" VerticalAlignment="Bottom" Width="72" Content="播放"/> <Button x:Name="PAUSE" Click="PAUSE_Click" Height="24" HorizontalAlignment="Left" Margin="120,0,0,96" VerticalAlignment="Bottom" Width="72" Content="暫停"/> <Button x:Name="STOP" Click="STOP_Click" Height="24" Margin="216,0,160,96" VerticalAlignment="Bottom" Content="停止"/> <Button x:Name="FULLSCREEN" Click="FULLSCREEN_Click" Height="24" HorizontalAlignment="Right" Margin="0,0,73,96" VerticalAlignment="Bottom" Width="72" Content="全螢幕"/> <TextBox x:Name="Path" Height="31" Margin="80,0,73,48" VerticalAlignment="Bottom" Text="" TextWrapping="Wrap"/> <TextBox Height="31" HorizontalAlignment="Left" Margin="25,0,0,48" VerticalAlignment="Bottom" Width="39" Text="路徑:" TextWrapping="Wrap"/> </Grid> </UserControl>

程式碼：

private void PLAY_Click(object sender, RoutedEventArgs e) { if (Path.Text != "") { Uri myUri = new Uri(Path.Text); Media1.Source = myUri; Media1.Play(); } else { Uri myUri = new Uri("http://silverlight.services.live.com/17942/mp3/video.wmv"); Media1.Source = myUri; Media1.Play(); } }

按下F5執行，但是竟然沒作用。李組長眉頭一皺，認為案情並不單純....

 

經過多次嘗試，在PLAY的Click事件程式碼的開頭加入

 

 

就可以順利動態載入Video檔案了。

 

線上Demo (不提供連結時，會播放預設的mp3)。

檔案下載

 

 

祝大家新年快樂

 

試煉大會 我們下次見~~

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。