Windows Phone開發(20):當MediaElement和VideoBrush合作的時候

來源:互聯網
上載者:User

標籤:多少   wrap   讀取   static   false   圖形   mp4   stack   window   

前面說的那麼多控制項都是“靜態”的,都是“啞吧”的,今天,你有沒有興趣研究一下,既能“有聲有色”又操作簡單的控制項嗎?如果有,請隨我來。

 

 

MediaElement播放多媒體檔案。

 

首先,隆重介紹一下MediaElement,為什麼要隆重呢?因為它簡單,真的,你一定會玩的,但是,MediaElement功能強大,它可以播放音頻和視頻,只要支援的格式就行了。

要設定播放的音頻或視頻檔案,你只需要設定Source屬性即可,它其實就是一個URI,如果要播放你項目中的媒體檔案,你先要把媒體檔案添加到你的項目中,把它的產生操作設定為資源,不用我說了,都會了吧。

你一定會問,能播放網路的URI指向的媒體檔案嗎?呵,你試一試就知道了。


閑話不扯了,開始做練習,首先自備一個3gp或MP4檔案,你自己隨便找一個,當然,其它格式也可以,呵呵,只要支援就行了,因為我們在模擬器中觀看效果,所以最後用一些常用的格式,模擬器不是所有的媒體檔案都能支援,具體請參考SDK文檔相關說明。

MediaElement是非常易用的,我簡單說說它的一些常用的屬性,相信你自己研究兩下就懂的。
1、Source:剛才說了,就是你要播放的媒體檔案;
2、AutoPlay:是否自動播放,呵,這個估計你比我更懂了;
3、Balance:立體聲左右聲道的音量比,就是一個平衡值,從-1到1,0在中間,所以是預設值;
4、Stretch:與Image控制項一樣,如何展開,或者保持縱橫比;
5、Volume:音量,0-1範圍內,預設0.5.

好的,下面看看第一個練習的布局。

 

 

  1. <phone:PhoneApplicationPage.Resources>  
  2.     <LinearGradientBrush x:Key="pathFill" StartPoint="0.5,0" EndPoint="0.5,1">  
  3.         <GradientStop Color="LightGreen" Offset="0"/>  
  4.         <GradientStop Color="Orange" Offset="1"/>  
  5.     </LinearGradientBrush>  
  6.     <Style x:Key="btnStyle" TargetType="Button">  
  7.         <Setter Property="Height" Value="80"/>  
  8.         <Setter Property="Width" Value="80"/>  
  9.         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>  
  10.         <Setter Property="VerticalContentAlignment" Value="Stretch"/>  
  11.         <Setter Property="BorderThickness" Value="0"/>  
  12.     </Style>  
  13. </phone:PhoneApplicationPage.Resources>  
  14. <Grid>  
  15.     <Grid.ColumnDefinitions>  
  16.         <ColumnDefinition Width="*"/>  
  17.         <ColumnDefinition Width="auto"/>  
  18.     </Grid.ColumnDefinitions>  
  19.     <StackPanel Orientation="Vertical"  
  20.                 Grid.Column="1">  
  21.         <Button Name="btnPlay" Style="{StaticResource btnStyle}" Click="btnPlay_Click">  
  22.             <Button.Content>  
  23.                 <Path Data="M0,0 L0,40 L40,20 Z" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  24.             </Button.Content>  
  25.         </Button>  
  26.         <Button Name="btnPause" Style="{StaticResource btnStyle}" Click="btnPause_Click">  
  27.             <Button.Content>  
  28.                 <Path Data="M0,0 L0,40 L15,40 L15,0 Z M25,0 L25,40 L40,40 L40,0" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  29.             </Button.Content>  
  30.         </Button>  
  31.         <Button Name="btnStop" Style="{StaticResource btnStyle}" Click="btnStop_Click">  
  32.             <Button.Content>  
  33.                 <Path Data="M0,0 L0,40 L40,40 L40,0 Z" Fill="{StaticResource pathFill}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  34.             </Button.Content>  
  35.         </Button>  
  36.   
  37.     </StackPanel>  
  38.       
  39.     <MediaElement x:Name="me" Grid.Column="0"  
  40.                   Source="2.mp4" AutoPlay="False"/>  
  41. </Grid>  


 


 

說明一下,每個按鈕上的圖形是我手畫上去的,Content屬性設定為Path對象就可以繪製和填充路徑,為了簡明,我使用了路徑標記法,不用急,我後面的文章會介紹。

繼續把背景代碼寫完,更簡單了,就幾個方法的調用。

 

  1. private void btnPlay_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     this.me.Play();  
  4. }  
  5.   
  6. private void btnPause_Click(object sender, RoutedEventArgs e)  
  7. {  
  8.     this.me.Pause();  
  9. }  
  10.   
  11. private void btnStop_Click(object sender, RoutedEventArgs e)  
  12. {  
  13.     this.me.Stop();  
  14. }  

 


 

 

 

把MediaElement和VideoBrush結合使用。

 

這是我們的第二個練習,VideoBrush也是一種畫刷,但它很特殊,它不用單色,不用漸層顏色,它用視頻來充填對象的表面,如元素的背景畫刷,前景畫刷等。

VideoBrush只要把SourceName的屬性值設定為MediaElement的名字即可,也就是說,VideoBrush的源是來自MediaElement對象,你既可以兩個同時使用,當然,如果你只希望用VideoBrush,那就把MediaElement的Visibility屬性設定為Collapsed。

有一點要說明,儘管在你的頁面中同時用到了MediaElement和VideoBrush,但是,在其內部,其實唯讀取一次資料,所以,引用多少個媒體檔案只取決於MediaElement類,無論你在頁面使用多少個VideoBrush,對效能是沒有任何影響的,前面我們說過資源,相信大家還記得,資源就是提高可重用率,不必要每次都要建立資源,不然會大大有損效能,項目中的檔案,上面說了,你只要把的產生操作設為資源,它就可以重複使用,而不會說我每增加一個引用就分配一個新執行個體,這不需要,資源執行個體只需建立一次即可,可以供多處重複引用。

如果不使用資源,你想象一下是多麼恐怖的事,假如一段MP3有2000個位元組,如果你每用到它都要在記憶體中new一個,如果我同時使用100個這個對象,就是100 * 2000 = 200000位元組,這樣記憶體都被你耗盡了,然而如果是資源呢?只要它被建立,一直就是同一個引用,記憶體只為它分配2000個位元組,無論你同時有1000個地方在引用它,指向的都是同一塊記憶體地區,哈,不知道這樣解釋,夠不夠通俗易懂呢?


OK,就吹到這兒,下面我們再練一例,在TextBlock上顯示Hello,但我希望這個TextBlock的前景不是使用顏色來填充,而是用視頻來填充,這樣一來,這段文字看起來就有聲有色了,是啊,你有沒有想起Flash裡面的濾罩層?但現在你可以通過VideoBrush類輕鬆地實現。

 

  1. <Grid>  
  2.     <MediaElement x:Name="me" Source="2.mp4" Visibility="Collapsed"/>  
  3.     <TextBlock x:Name="txt" Text="Hello" HorizontalAlignment="Center" FontFamily="Arial Black" FontSize="250" TextWrapping="Wrap">  
  4.         <TextBlock.Foreground>  
  5.             <VideoBrush AlignmentX="Center" AlignmentY="Center" Stretch="Uniform"  
  6.                         SourceName="me"/>  
  7.         </TextBlock.Foreground>  
  8.     </TextBlock>  
  9. </Grid>  

 

 

還記得前兩節課說過的變換和三維透視嗎?你不妨自己試試,知識就是通過“滾雪球”方式一點一點累積起來,所以,我強烈建議你去改一下上面的代碼,把上兩節的內容和本節的內容結合,看看能不能做出很美觀的特效出來。

Windows Phone開發(20):當MediaElement和VideoBrush合作的時候

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: