Silverlight是嵌入在网页当中的，如html，aspx等页面中，首先在网页中放一个“容器”，如div或panel等。记在要使用Silverlight的页面中引用Silverlight.js。本例创建一个静态页面lss.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>silverlight 播放音频和视频</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="lss.htm.js"></script>
<script type="text/javascript" src="lss.xaml.js"></script>
</head>
<body>
silverlight 播放音频和视频
<br /><br />
<input id="Button1" type="button" onclick="PlayAudio()" value="播放" />
<input id="Button2" type="button" onclick="PauseAudio()" value="暂停" />
<input id="Button3" type="button" onclick="StopAudio()" value="停止" />
<input id="Button4" type="button" onclick="LargerVolume()" value="音量大" />
<input id="Button5" type="button" onclick="SmallerVolume()" value="音量小" />
<input id="Button6" type="button" onclick="LeftVolume()" value="左平衡" />
<input id="Button7" type="button" onclick="RightVolume()" value="右平衡" />
<input id="Button8" type="button" onclick="MiddleVolume()" value="中间" />
<div id="SilverlightControlHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
<br /><br />
</body>
</html>
**************************************************************
创建一个lss.htm.js页面实现lss.htm中createSilverlight()方法，lss.htm.js代码如下:
**************************************************************
function createSilverlight()
{
Silverlight.createObjectEx({
source:'lss.xaml',
parentElement: document.getElementById('SilverlightControlHost'),
id:'SilverlightControl',
properties:{
width:'500',
height:'400',
background:'lightblue',
isWindowless:'false',
version:'1.0'
},
events:
{},
context:null
});
}
if(!window.Silverlight)
{
window.Silverlight = {};
}
Silverlight.createDelegate = function(instance,method){
return function(){
return method.apply(instance,arguments);
}
}
**************************************************************
创建一个xaml文件显示Silverlight内容，本例创建的文件名为：lss.xaml ，代码如下：
**************************************************************
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="SilverlightPlugIn">
<TextBlock Canvas.Left="10" Canvas.Top="20" Opacity="0.5" Foreground="red" Text="正在播放音频 文件....."></TextBlock>
<MediaElement x:Name="audio" Source="audio/加州旅馆WMV-老鹰乐队.wmv" Volume="0.5" AutoPlay="false"></MediaElement>
</Canvas>
</Canvas>
TextBlock节是用来显示文本的，MediaElement 节是用来放置音频和视频文件的。
**************************************************************
创建实现xaml文件里面功能的文件lss.xaml.js,代码如下：
// 播放
function PlayAudio()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl.content.findName("audio")
MediaElement.play();
}
// 暂停
function PauseAudio()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
MediaElement.pause();
}
// 停止
function StopAudio()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
MediaElement.stop();
}
// 增大声音
function LargerVolume()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
if(MediaElement.Volume<1)
{
MediaElement.Volume+=0.1;
}
}
// 减小声音
function SmallerVolume()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
if(MediaElement.Volume>0)
{
MediaElement.Volume-=0.1;
}
}
// 左音道输出
function LeftVolume()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
MediaElement.Balance = -1;
}
// 右音道输出
function RightVolume()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
MediaElement.Balance = 1;
}
// 左右音道输出
function MiddleVolume()
{
var SilverlightControl = document.getElementById("SilverlightControl");
var MediaElement = SilverlightControl. content.findName("audio");
MediaElement.Balance = 0;
}
记得要在lss.htm中引用lss.xaml.js，lss.htm.js，Silverlight.js文件。
