关于我们 广告服务 社区论坛
设为首页 加入收藏

行业新闻
服 务 器
模版下载
建站指南
冲浪宝典
办公软件
网站运营
操作系统
QQ 专题
网页制作
安全防御
视频教程
网络编程
SEO专区
软件下载
图像设计
Cisco
网页特效
Wap 技术
联盟赚钱
网页素材
 首页 | 企业建站 | 网页制作 | 网站运营 | 网络编程 | 图像设计 | 冲浪宝典 | 操作系统 | SEO专区 | 联盟赚钱 | Cisco

欢迎来到e天下网络首页>>网络编程>>CGI>>正文|SilverLight:创建供视频播放器使用的UI

SilverLight:创建供视频播放器使用的UI

[ 来路:21kn.com    时间:2007-7-8 16:28:41    点击: ]

 

  上一篇:构建一个简单的Silverlight应用程序

  在项目中添加视频文件。为此,请右键单击屏幕右上方 Project Files(项目文件)窗口中的项目文件,然后选择 Add Existing Item...(添加现有项目)。

  选择某个 WMV 文件并将其添加到项目时,项目浏览器中将显示该文件,同时在视图中添加了一个媒体元素。

SilverLight:创建供视频播放器使用的UI
图 2. 在 XAML 视图中添加媒体元素

  现在即可运行您的项目,浏览器将启动并播放您的视频!

  通过编辑 XAML 可以停止自动播放视频。您会看到 XAML 设计器右侧有两个选项卡:Design(设计)和 XAML。选择“XAML”选项卡,会打开 XAML 编辑器,如图 3 中所示。使用该编辑器为媒体元素编辑 XAML 文本,添加属性 AutoPlay=False。

SilverLight:创建供视频播放器使用的UI
图 3. 在 XAML 编辑器中编辑 XAML

  现在,如果您运行该应用程序,会看到 Silverlight 内容虽然呈现了视频的第一帧,但并不播放。

  在视频播放器中添加控件

  为该应用程序添加两个文本块,文本内容分别为 Play 和 Stop,名称分别为 txtPlay 和 txtStop。完成后,XAML 应如下所示:

<Canvas   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   Width="640" Height="480"   Background="White"   >   <MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>   <TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>   <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/></Canvas>

  接下来,为文本块在 XAML 中添加事件处理程序声明。为此,可以使用 MouseLeftButtonDown 属性声明单击鼠标的处理程序。在 txtPlay 文本块中,添加对 DoPlay 的事件处理程序;在 txtStop 文本块中,添加对 DoStop 的事件处理程序。完成后,XAML 应如下所示:

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136"       Canvas.Top="336" Text="Play" TextWrapping="Wrap"        MouseLeftButtonDown="javascript:DoPlay"/><TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136"       Canvas.Top="368" Text="Stop" TextWrapping="Wrap"       MouseLeftButtonDown="javascript:DoStop"/>

  现在,如果用户单击其中一个文本块,将触发一个事件,您可通过 JavaScript 功能捕获并处理该事件。

  在 JavaScript 中处理事件

  模板创建的 Scene.xaml.js 可用于在 JavaScript 中捕获并处理用户事件。由于您在 XAML 内指定了 DoPlay 和 DoStop 事件处理程序,因此应在此处付诸实施。相应的代码如下所示:

function DoPlay(sender, eventArgs){   var theHost = document.getElementById("SilverlightControl");   var theMedia = theHost.content.findName("Movie_wmv");   theMedia.Play();}function DoStop(sender, eventArgs){   var theHost = document.getElementById("SilverlightControl");   var theMedia = theHost.content.findName("Movie_wmv");   theMedia.Stop();}

  在本例中,将 Silverlight 控件称为 SilverlightControl,将引用该控件的 JavaScript 变量称为 theHost。稍后查找媒体元素(在本例中称为 Movie_wmv)时,将用到上述名称。在项目中添加电影时,为您创建了此媒体元素,该元素的名称是根据电影名称命名的。因此,如果电影的名称是 Movie.wmv,则此媒体元素就称为 Movie_wmv。如果使用其他电影,则控件也会相应地采用其他名称。

  该媒体元素有 Play 和 Stop 两个方法,分别用于启动或停止媒体播放。

  由于存在对该媒体元素的引用,因而可以调用上述方法,电影将随之停止或启动,如图 4 中所示:

SilverLight:创建供视频播放器使用的UI
图 4. 运行应用程序

  至此,您已构建了自己的第一个 Silverlight 应用程序!

  下一篇:Silverlight入门:了解Silverlight调用

::::站长友情提示:多花一分钟学点什么都好::::

 

上一篇:构建一个简单的Silverlight应用程序  下一篇:Silverlight入门:了解Silverlight调用

 ::热点信息::

 

= = 免责声明 = =

① 欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com

::推荐文章::

 

ASP教程:详细学习ASP的内置对象

::图像设计::

 

动态图片搜索家——GIF RUNN
软件搜索利器——FileFerret
实例说明构图要讲规律
Character Builder让你尽展靓
全景图速成者Cool360
三维模型速成工具——Canoma
剪贴专家SmartBoard 32
新世纪的图像处理利器——Ph
更多内容..

 

 

关于我们 广告服务 友情链接 合作伙伴 社区论坛 免责声明

Copyright © 2007   21kn.com Inc. All rights reserved.e天下网络工作室

网站白天客服QQ:26875416 (非24小时)  合作QQ:597004688    粤ICP备06026423号