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 还提供几个媒体特有的属性:
请参见 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 属性为 下面的示例添加全屏回放到前面示例定义的交互控制。 [隐藏 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,遵照下面的步骤。
下面的示例使用了一个 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 对象。 Copyright © 2007 Microsoft Corporation. All rights reserved. Legal Notices. 千一网络 译 |