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。当您单击网页时，它将开始播放视频。

当您再次单击网页时，它将暂停视频。