</Canvas>
MediaElement 标记用于定义视频它名称是 mPlayer其像素设为 640×400“Source”标记指向个微软网站WebSite提供下载 WMV 视频
接下来是 3个 TextBlock 元素用于定义“Play”(播放)、“Stop”(停止)和“Pause”(暂停)按钮这些按钮垂直排列在画布左上方注意 Canvas.Left 尚未设置默认为 0这些 TextBlock 元素定义了单击 (MouseLeftButtonDown) 时引发 JavaScript 事件处理在它们上面按下鼠标按钮时Silverlight 将事件传送至浏览器由 JavaScript 捕获和处理
现在让我们组合成个应用:它使用此 XAML并使用 Visual Web Developer Express 实现 JavaScript 事件处理要使它工作需要个 silverlight.js 文件该文件可以从 Silverlight SDK 下载中得到也可以在 MSDN 举例下载网站WebSite任意 Silverlight 举例中得到
使用 Visual Web Developer Express创建新 Web 站点在该站点中创建名为 js 文件夹在其中添加 silverlight.js 文件右键单击 js 文件夹并选择“Add New Item”(添加新项)在新建文件对话框中选择 JScript 文件并将其称为 eventhandlers.js
然后右键单击 Solution Explorer 中项目单击“Add New Item”(添加新项)创建个新 XML 文件名为 videoplayer.xaml用图 5 列出 XAML 填充
最后在项目中添加个新 HTML 页面命名为 Default.htm编辑 HTML 页面使其加载 JavaScript 库并用它们创建个 Silverlight 播放器例子以呈现 XAML 内容图 6 显示了 Default.htm 完整源代码
Figure6Default.htm 加载媒体播放器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Untitled Page</title>
<script type=”text/javascript” src=”js/silverlight.js”></script>
<script type=”text/javascript” src=”js/eventhandlers.js”></script>
</head>
<body>
<form>
<div id=”AgControl1Host” style=”background:#FFFFFF”>
<script type=”text/javascript”>
Sys.Silverlight.createObjectEx(
{source: ‘videoplayer.xml’,
parentElement:’AgControl1Host’,
Id:’AgControl1’,
properties:{
width:’1024’,
height:’530’,
background:’white’,
isWindowless:’false’,
framerate:’24’,
version:’0.8.5’},
events:{onError:null, onLoad:null,
onNotInstalled:null},
context:null});
</script>
</div>
</form>
</body>
</html>
最新评论