Silverlight – 视频和音频

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

主要区别在于它将是一个移动图像，但是如果您将其指向仅包含音频而没有视频的文件（例如 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。当您单击网页时，它将启动视频。

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