Hello World
Spiga

WPF/E CTP Quick Start - 第八部分:媒体(翻译)

2006-12-12 05:26 by 老赵, 3619 visits

WPF/E提供了MediaElement对象,可以让您在页面中播放WMV(Windows Media Video)和WMA(Windows Media Audio)文件。

这篇文档包含了以下部分:

 

在页面中添加媒体信息

如果需要在页面中添加媒体信息,您需要创建一个MediaElement元素,并将它的Source属性指向您的媒体文件。下面则是一个示例:

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

重新开始查看内容

就像其它UIElement对象一样,您可以在MediaElement对象之上绘制图形。下面的示例将在上一个例子的基础上,将一个Ellipse添加到MediaElement元素之上。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <MediaElement Source="xbox.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。请参考WPF/E的SDK中关于Stetch属性的部分,以获得更多信息。
  • IsMuted:指定了MediaElement是否静音,把它设为True就能使MediaElement静音,它的默认值为False。
  • Volume:使用0到1之间的值指定MediaElement的音量,1表示最响。它的默认值为0.5。

请参考WPF/E的SDK以得到更多MediaElement的属性信息。

 

交互式地控制媒体的播放

您可以使用playpausestop等方法交互式地控制媒体的播放。下面的示例使用了playpausestop方法来交互式地控制媒体的播放。

<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="xbox.wmv" Width="300" Height="300" />

    <!-- Stops media playback.-->        
    <Canvas MouseLeftButtonDown="javascript:media_stop" Canvas.Left="20" Canvas.Top="260">
        <Rectangle Stroke="Black" 
             Height="40" Width="40" 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="javascript:media_pause" 
         Canvas.Left="70" Canvas.Top="260">
        <Rectangle Stroke="Black" 
             Height="40" Width="50" 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="javascript:media_begin" Canvas.Left="130" Canvas.Top="260">
        <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
             Height="40" Width="50">
            <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>
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();
}

重新开始查看内容

 

下面该做什么呢?

在下一部分“动画”中,您会了解如何使用标记来定义动画,以及EventTriggerStoryboard对象的使用方式。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

8 条回复

  1. 良[匿名][未注册用户]
    *.*.*.*
    链接

    良[匿名][未注册用户] 2006-12-12 09:24:00

    最近好像都在翻译WPF/E 辛苦了.老赵.. AJAX是不是停了呢?

  2. 编写人生
    *.*.*.*
    链接

    编写人生 2006-12-12 12:53:00

    非常感谢你的辛苦劳动!!!!!!!

  3. 580k[未注册用户]
    *.*.*.*
    链接

    580k[未注册用户] 2006-12-12 15:28:00

    使用580k.com帮您关注此blog更新
    580k是一种WEB形式的网页监控工具(网址:http://***/).所谓网页监控工具,用其首页的描述,就是:您关注的网页内容发生变化时,580k会将变化的内容用邮件通知您.580K作为WEB工具,其提供的功能是有实际应用的,相信一些需要每天关注大量信息的人,如公司老总、炒股者、网络编辑、情报员、论坛灌水爱好者、新闻评论员等,会非常喜欢使用它的.

  4. 老赵
    admin
    链接

    老赵 2006-12-12 16:44:00

    @良[匿名]
    “深入Atlas系列”我决定等正式版出现以后再继续。:)

  5. 老赵
    admin
    链接

    老赵 2006-12-12 17:01:00

    @编写人生
    :)

  6. stswordman
    *.*.*.*
    链接

    stswordman 2007-02-25 13:49:00

    感觉那个“全屏”显示挺酷的

  7. 老赵
    admin
    链接

    老赵 2007-02-25 18:45:00

    @stswordman
    可惜感觉不够实用……

  8. XuQ
    *.*.*.*
    链接

    XuQ 2008-05-06 11:18:00

    使用media element能不能获得音乐文件的信息呢,如作者,专辑等,查了MSDN但没有找到,请指教。

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我