Silverlight - 影片與音訊

---

---

在本章中，我們將瞭解 Silverlight 如何播放影片和音訊。MediaElement 是 Silverlight 中所有影片和音訊的核心。它允許您在應用程式中整合音訊和影片。MediaElement 類的工作方式類似於Image 類。您只需將其指向媒體，它就會呈現音訊和影片。

主要區別在於它將是一個動態影像，但是如果您將其指向僅包含音訊而沒有影片的檔案（例如 MP3），它將播放音訊而不會在螢幕上顯示任何內容。

MediaElement 作為 UI 元素

MediaElement 派生自框架元素，它是所有 Silverlight 使用者介面元素的基類。這意味著它提供了所有標準屬性，因此您可以修改其不透明度，可以設定剪輯或對其進行轉換等等。

讓我們來看一個MediaElement 的簡單示例。

開啟 Visual Studio 的 Microsoft Blend 並建立一個新的 Silverlight 應用程式專案。

現在將影片或音訊檔案拖放到 Blend 設計介面。

它將在介面中新增一個 MediaElement，並在您的專案中新增影片檔案的副本。您可以在解決方案資源管理器中看到它。

您可以將其移動，更改其大小，還可以執行諸如應用旋轉等操作。

現在，它將在MainPage.xaml 檔案中為您生成相關的 XAML，如下所示。

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"  
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
			
         <MediaElement.RenderTransform> 
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform> 
			
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

當編譯並執行上述應用程式時，您將看到影片正在您的網頁上播放。

控制

MediaElement 只呈現媒體。它不提供任何標準播放器控制元件。它自動開始播放並在到達結尾時停止，使用者無法暫停或以其他方式控制它。因此，在實踐中，大多數應用程式都希望為使用者提供比這更多的控制。

您可以透過將AutoPlay 設定為False 來停用自動播放。這意味著媒體播放器在您請求之前不會播放任何內容。

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
   AutoPlay = "False" 
   Margin = "51,49,53,53"  
   Source = "/Microsoft Silverlight DEMO.mp4"  
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

因此，當您想要播放影片時，只需呼叫MediaElement Play() 方法即可。它還提供停止和暫停方法。

讓我們再次看一下相同的示例，並對其進行一些修改以允許一些控制。在MediaElement 中附加MouseLeftButtonDown 處理程式，如下面的 XAML 程式碼所示。

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
         AutoPlay = "False" 
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown" 
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5"> 
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

這是MouseLeftButtonDown 事件處理程式的實現，它將檢查媒體元素的當前狀態是否正在播放，如果是則暫停影片，否則開始播放影片。

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media;

namespace MediaElementDemo { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }  
		
      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {
		
         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) { 
            Microsoft_Silverlight_DEMO_mp4.Pause(); 
         } else { 
            Microsoft_Silverlight_DEMO_mp4.Play(); 
         } 
      } 
   } 
}

當編譯並執行上述程式碼時，您將看到空白網頁，因為我們已將AutoPlay 屬性設定為False。當您單擊網頁時，它將開始播放影片。

當您再次單擊網頁時，它將暫停影片。