媒体

Silverlight 提供了一个 MediaElement 对象， 你可以用来播放 WMV (Windows Media Video) 和 WMA (Windows Media Audio) 文件，以及 MP3 文件。

本文档包含以下章节。

添加媒体到你的页面

要添加媒体到你的文件，你要创建一个 MediaElement 并设置它的 Source 属性以通过 URI 路径引用你的媒体源文件。 以下是一个示例。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement 
    Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
</Canvas>

[隐藏] [重新开始]

像其它 UIElement 对象一样， 你可以在 MediaElement 对象上绘图， 下面的示例添加了一个 Ellipse 到上一个示例的 MediaElement 前面。

[隐藏 XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
  
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
     Opacity="0.6" />
</Canvas>

[隐藏] [重新开始]

有用的 MediaElement 属性

MediaElement 除了具有 UIElement 有的属性， 比如 Opacity 和 Clip， MediaElement 还提供几个媒体特有的属性：

  • Stretch：设定视频如何拉伸填满 MediaElement。 可能的值有：None、Uniform、UniformToFill 和 Fill。 默认值是 Fill。关于 Stretch 属性的更多信息，请参见 Silverlight SDK。
  • IsMuted：设置 MediaElement 是否已经静音。 true 使 MediaElement 静音。 默认值是 false。
  • Volume：设定 MediaElement 音频的音量，0-1，1 为音量最大。 默认值是 0.5。

请参见 Silverlight SDK 获取更多 MediaElement 属性。

交互控制媒体回放

你可以通过 Play、Pause 和 Stop 方法交互控制媒体回放。下面的示例使用了 Play、Pause 和 Stop 方法交互控制媒体的回放。

[隐藏 XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="media" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300" />

  <!-- Stops media playback.-->    
  <Canvas MouseLeftButtonDown="media_stop" 
    Canvas.Left="10" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
  </Canvas>
  
  <!-- Pauses media playback. -->
  <Canvas MouseLeftButtonDown="media_pause" 
     Canvas.Left="70" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
  </Canvas>
  
  <!-- Begins media playback. -->
  <Canvas MouseLeftButtonDown="media_begin" 
    Canvas.Left="130" Canvas.Top="265">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="30" Width="55">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
  </Canvas>
     
</Canvas>

[隐藏 JavaScript]

function media_stop(sender, args) {
    sender.findName("media").stop();
}

function media_pause(sender, args) {
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    sender.findName("media").play();
}

[隐藏] [重新开始]

全屏媒体回放

要全屏回放媒体，设置承载你内容的 Silverlight 插件的 FullScreen 属性为 true 并调节 MediaElement 的尺寸到 Silverlight 对象模型报告的 ActualWidth 和 ActualHeight

下面的示例添加全屏回放到前面示例定义的交互控制。

[隐藏 XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="canvas_loaded">
    
  <MediaElement x:Name="media" 
     Source="thebutterflyandthebear.wmv" 
     Width="300" Height="300" />

  <Canvas x:Name="buttonPanel">
  
    <!-- Stops media playback.-->    
    <Canvas MouseLeftButtonDown="media_stop" 
       Canvas.Left="10" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Orange" Offset="0.0" />
            <GradientStop Color="Red" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
    </Canvas>
  
    <!-- Pauses media playback. -->
    <Canvas MouseLeftButtonDown="media_pause" 
       Canvas.Left="70" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Orange" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
    </Canvas>
  
    <!-- Begins media playback. -->
    <Canvas MouseLeftButtonDown="media_begin" 
       Canvas.Left="130" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="55">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="LimeGreen" Offset="0.0" />
            <GradientStop Color="Green" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
    </Canvas>
  
    <!-- Switches to full screen mode. -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen" 
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock> 
    </Canvas>  
  
  </Canvas>
     
</Canvas>

[隐藏 JavaScript]

function media_stop(sender, args) {

    sender.findName("media").stop();
}

function media_pause(sender, args) {
    
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    
    sender.findName("media").play();
}


function canvas_loaded(sender, args)
{
  
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    

}

function toggle_fullScreen(sender, args)
{
    var silverlightPlugin = sender.getHost();
    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;  
   
}

function onFullScreenChanged(sender, args)
{

  
    var silverlightPlugin = sender.getHost();
    var buttonPanel = sender.findName("buttonPanel");
    
    if (silverlightPlugin.content.fullScreen == true)
    {
      buttonPanel.opacity = 0;
    }
    else 
    {
      buttonPanel.opacity = 1;
    }
    
    var mediaPlayer = sender.findName("media");
    mediaPlayer.width = silverlightPlugin.content.actualWidth;
    mediaPlayer.height = silverlightPlugin.content.actualHeight;
     

}

[隐藏] [重新开始]

使用视频喷涂

你可以使用一个 VideoBrush 来喷涂形状和带视频的文字。 要使用 VideoBrush，遵照下面的步骤。

  1. 创建一个 VideoBrush 元素。
  2. 创建一个 MediaElement 并赋一个 Name。 MediaElement 为 VideoBrush 处理视频流。 除非你想要看到两份视频拷贝，否则你应该设置 MediaElement 的 Opacity 到 0.0。 如果你不想要音频（作为一个视频笔刷时常有此要求），设置 MediaElement 的 IsMuted 属性值为 true。
  3. 将 VideoBrush 的 SourceName 属性设置为你刚刚创建的 MediaElement 的名称。

下面的示例使用了一个 VideoBrush 来喷涂 TextBlock 的 Foreground。

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="myMediaElement" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300"
    Opacity="0" IsMuted="True" />  
  
  <TextBlock Canvas.Left="10" Canvas.Top="10"
    FontFamily="Verdana"
    FontSize="80" FontWeight="Bold">Watch<LineBreak/>This
    <TextBlock.Foreground>
      <VideoBrush SourceName="myMediaElement" />
    </TextBlock.Foreground>
  </TextBlock>
  
</Canvas>

[隐藏] [重新开始]

停止、暂停或播放 MediaElement 影响到相关的 VideoBrush， 但改变 MediaElement 的大小或透明度将不会有影响。 同一个 MediaElement 可被用于多个 VideoBrush 对象。

下一步是什么

下一个主题，animations， 描绘了如何使 Silverlight 对象活动起来。

Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices.

千一网络 译