Silverlight - 视频和音频

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

主要区别在于它将是一个动态图像，但如果你指向只包含音频的文件而不是视频如MP3，播放时不会在屏幕上显示任何内容.

MediaElement作为UI元素

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

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

打开Microsoft Blend for Visual Studio并创建一个新的Silverlight应用程序项目.

现在将视频或音频文件拖放到Blend设计界面.

它会将MediaElement添加到曲面，并在项目中添加视频文件的副本.你可以在Solution explorer中看到它.

你可以移动它，改变它的大小，你可以做一些事情，比如应用旋转等.

现在，它将在 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 只是介绍媒体.它不提供任何标准播放器控件.它会自动开始播放并在到达结尾时停止播放，用户无法暂停或以其他方式控制它.因此在实践中，大多数应用程序都希望为用户提供更多控制.

您可以通过将自动播放设置为来禁用自动播放假的.这意味着媒体播放器在您提出要求之前不会播放任何内容.

<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(); 
         } 
      } 
   } 
}

编译执行上述代码时，您会看到空白网页，因为我们已将自动播放属性设置为错误.当您点击网页时，它将启动视频.

再次点击该网页时，它会暂停视频.