Silverlight 视频刷概述 VideoBrush - threeG

Silverlight 视频刷概述

Silverlight 视频刷（VideoBrush）用视频画出一个区域。本主题描述如何使用视频刷画出视频填充的基本形状和文字。同时通过例子说明如何交互控制 视频刷 。

本主题包含以下小节：

先决条件

由于 视频刷（VideoBrush）依赖于 MediaElement 来提供视频流，所以，你应当知道如何创建一个 MediaElement，并利用它打开一个媒体文件。有关 MediaElement 的介绍，请参见媒体概述。

什么是视频刷（VideoBrush）？

VideoBrush 是一种 Brush 对象，与 LinearGradientBrush 或者 ImageBrush 类似。然而，它不是使用渐变或者图像画出一个区域，而是使用视频内容画出一个区域，这个视频由 MediaElement 提供。和其他类型的画刷类似，你可以使用 VideoBrush 画出 Rectangle 对象的 Fill、 Canvas 的 Background，或者 TextBlock 的 Foreground。有关其他类型画刷的更多信息，请参见画刷概述。

演练：使用视频内容画文字块（TextBlock）

要用视频画出一个区域，你要创建一个 MediaElement 和一个 VideoBrush ，然后将 VideoBrush 应用到你想要画的对象上。在本小节中，你将使用 VideoBrush 和 MediaElement 画出下面例子中的 TextBlock。

XAML

<Canvas
            xmlns="http://schemas.microsoft.com/client/2007"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
            <!-- The text to paint. -->
            <TextBlock
            Canvas.Left="5" Canvas.Top="30"
            FontFamily="Verdana" FontSize="120" FontWeight="Bold"
            Text="Video">
            </TextBlock>
            </Canvas>

要使用视频画出 TextBlock，请完成下面的步骤。

创建 MediaElement，设置他的 Source 属性为你想要显示视频的统一资源标识符（URI）。

XAML

<Canvas
                xmlns="http://schemas.microsoft.com/client/2007"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                <MediaElement
                Source="sampleMedia/Butterfly.wmv"  />
                <!-- The text to paint. -->
                <TextBlock
                Canvas.Left="5" Canvas.Top="30"
                FontFamily="Verdana" FontSize="120" FontWeight="Bold"
                Text="Video">
                </TextBlock>
                </Canvas>

为 MediaElement 指定一个名字。

XAML

<Canvas
                xmlns="http://schemas.microsoft.com/client/2007"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                <MediaElement
                x:Name="myButterflyMediaElement"
                Source="sampleMedia/Butterfly.wmv"  />
                <!-- The text to paint. -->
                <TextBlock
                Canvas.Left="5" Canvas.Top="30"
                FontFamily="Verdana" FontSize="120" FontWeight="Bold"
                Text="Video">
                </TextBlock>
                </Canvas>

创建一个 VideoBrush，使用它设置 TextBlock 的 Foreground 属性。（你也可以使用 VideoBrush 设置任何接受画刷值的任何属性，比如 Rectangle 的 Fill 属性或者 Canvas 的 Background 属性。

XAML

<Canvas
                xmlns="http://schemas.microsoft.com/client/2007"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                <MediaElement
                x:Name="myButterflyMediaElement"
                Source="sampleMedia/Butterfly.wmv"  />
                <!-- The text to paint. -->
                <TextBlock
                Canvas.Left="5" Canvas.Top="30"
                FontFamily="Verdana" FontSize="120" FontWeight="Bold"
                Text="Video">
                <TextBlock.Foreground>
                <VideoBrush />
                </TextBlock.Foreground>
                </TextBlock>
                </Canvas>

将 VideoBrush 的 SourceName 属性设置为第二步中为 MediaElement 指定的相同名字。 TextBox 的文字（“video”）现在就由视频内容填充了。

XAML

<Canvas
                xmlns="http://schemas.microsoft.com/client/2007"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                <MediaElement
                x:Name="myButterflyMediaElement"
                Source="sampleMedia/Butterfly.wmv"  />
                <!-- The text to paint. -->
                <TextBlock
                Canvas.Left="5" Canvas.Top="30"
                FontFamily="Verdana" FontSize="120" FontWeight="Bold"
                Text="Video">
                <TextBlock.Foreground>
                <VideoBrush SourceName="butterflyMediaElement" />
                </TextBlock.Foreground>
                </TextBlock>
                </Canvas>

这个例子现在显示了视频的两份拷贝：一个来自你第一步中创建的 MediaElement，另外一个来自你刚才创建的 VideoBrush。要只显示视频的一份拷贝，请将 MediaElement 的 Opacity 属性设置为 0。要关闭 MediaPlayer 的声音输出，将他的 IsMuted 属性设置为 true。

XAML

<Canvas
                xmlns="http://schemas.microsoft.com/client/2007"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                <MediaElement
                x:Name="butterflyMediaElement"
                Source="sampleMedia/Butterfly.wmv" IsMuted="True"
                Opacity="0.0" IsHitTestVisible="False" />
                <TextBlock Canvas.Left="5" Canvas.Top="30"
                FontFamily="Verdana" FontSize="120"
                FontWeight="Bold" TextWrapping="Wrap"
                Text="Video">
                <!-- Paint the text with video. -->
                <TextBlock.Foreground>
                <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
                </TextBlock.Foreground>
                </TextBlock>
                </Canvas>

视频刷（VideoBrush）属性

除了从 Brush 类型继承下来的属性（如 Opacity 和 RelativeTransform）外，VideoBrush 提供了下面的额外属性：

SourceName:
提供刷子视频 MediaElement 的名字；
Stretch:
下面的值之一，描述视频内容如何伸展来适合要画的区域： None、Stretch、Uniform 和 UniformToFill。默认值是 Stretch。

关于其他属性的更多信息，请参见 VideoBrush 对象参考页面。

VideoBrush 和 MediaElement 之间的关系

视频刷（VideoBrush）对象的当前视频帧由它的 MediaElement 决定。下图描述了 MediaElement 和 VideoBrush 之间的关系。

注意：当 MediaElement 加载内容时，被 VideoBrush 使用并作为它的 SourceName 属性的 MediaElement 对象，被 MediaElement Source 引用的视频被下载，并只解码一次，在 MediaElement 和 VideoBrush 一起使用时，你不必担心性能的巨大下降，及时你同时使用 MediaElement 和 VideoBrush 显示视频。

通过暂停或者停止 MediaElement，你可以暂停或者停止 VideoBrush。下面的例子通过操作 MediaElement 源来暂停、停止核播放 VideoBrush。

XAML

<Canvas
            xmlns="http://schemas.microsoft.com/client/2007"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
            <MediaElement
            x:Name="butterflyMediaElement"
            Source="sampleMedia/Butterfly.wmv" IsMuted="True"
            Opacity="0.0" IsHitTestVisible="False" />
            <TextBlock Canvas.Left="5" Canvas.Top="30"
            FontFamily="Verdana" FontSize="120"
            FontWeight="Bold" TextWrapping="Wrap"
            Text="Video">
            <!-- Paint the text with video. -->
            <TextBlock.Foreground>
            <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
            </TextBlock.Foreground>
            </TextBlock>
            <Canvas Canvas.Left="5" Canvas.Top="200">
            <!-- Play -->
            <Canvas Width="120" Height="20"
            MouseLeftButtonDown="playMedia" Background="Transparent">
            <Rectangle Width="120" Height="20" Stroke="Gray" StrokeThickness="2" />
            <TextBlock Canvas.Left="10" Text="play" />
            </Canvas>
            <!-- Pause -->
            <Canvas Width="120" Height="20" Canvas.Left="130"
            MouseLeftButtonDown="pauseMedia" Background="Transparent">
            <Rectangle  Width="120" Height="20" Stroke="Gray" StrokeThickness="2" />
            <TextBlock Canvas.Left="10" Text="pause" />
            </Canvas>
            <!-- Stop -->
            <Canvas Width="120" Height="20" Canvas.Left="260"
            MouseLeftButtonDown="stopMedia" Background="Transparent">
            <Rectangle Width="120" Height="20" Stroke="Gray" StrokeThickness="2" />
            <TextBlock Canvas.Left="10" Text="stop" />
            </Canvas>
            </Canvas>
            </Canvas>

JavaScript

function stopMedia(sender, args) {
            sender.findName("butterflyMediaElement").stop();
            }
            function pauseMedia(sender, args) {
            sender.findName("butterflyMediaElement").pause();
            }
            function playMedia(sender, args) {
            sender.findName("butterflyMediaElement").play();
            }

尽管前面的例子只显示一个 VideoBrush，多个 VideoBrush 对象共用一个相同的 MediaElement 是可以的。

尽管暂停、停止或播放 MediaElement 影响它的 VideoBrush，有些 MediaElement 的操作和设置对 VideoBrush 没有任何影响。下面的 MediaElement 方法和属性同时控制 VideoBrush：

下面的 MediaElement 方法和属性对 VideoBrush 没有影响：

请参见

画刷概述
 媒体概述
 MediaElement
VideoBrush

发表于 2008-08-26 17:15 threeG 阅读(703) 评论(0) 编辑收藏举报