Silverlight - 视频和音频

---

在本章中，我们将了解 Silverlight 设施如何播放视频和音频。MediaElement是Silverlight中所有视频和音频的核心。这允许您将音频和视频集成到您的应用程序中。MediaElement类的工作方式与Image类类似。您只需将其指向媒体，它就会呈现音频和视频。

主要区别在于它将是一个移动图像，但如果您将其指向仅包含音频而不包含视频的文件（例如 MP3），它将播放该文件，而不会在屏幕上显示任何内容。

MediaElement 作为 UI 元素

MediaElement派生自框架元素，框架元素是所有 Silverlight 用户界面元素的基类。这意味着它提供了所有标准属性，因此您可以修改其不透明度，可以设置剪辑或对其进行变换等等。

让我们看一个MediaElement的简单示例。

打开 Microsoft Blend for Visual Studio 并创建一个新的 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。当您单击网页时，它将启动视频。

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