网页中的媒体播放器

核心提示： 看到很多人的网页上都是漂亮的播放器是不是很羡慕啊，下午我们就来分析一下，网页中的媒体播放器，让你也可以拥有该功能， 经常可以看到一些网络中有使用script写的播放器,这些播放器看上去都很不错,由于我希望我的杂志阅读起来不是那么闷,所以我决心自己写一个简单的,因为太复杂会使客户端的资源显得很紧张.那么如何来做呢?

　  看到很多人的网页上都是漂亮的播放器是不是很羡慕啊，下午我们就来分析一下，让你也可以拥有该功能。

　  经常可以看到一些网络中有使用script写的播放器,这些播放器看上去都很不错,由于我希望我的杂志阅读起来不是那么闷,所以我决心自己写一个简单的,因为太复杂会使客户端的资源显得很紧张.那么如何来做呢?其实,思路很简单.我知道在HTML中要包含播放器的方法很多如使用ActiveX控件等方法,可是这样做,会使用客户端承担不必要的开销.因此我使用HTML自带的标记.<IMG> 这个标记虽然一般用来放图象.可是也可以用来播放一些标准格式的多媒体.如AVI,WAV,MID,MP3等.在这个标记中有个属性dynsrc,这个属性就是专门用来从事这个工作的.(在MSDN中也有记载).该属性的工作就是记录媒体文件的来源.如下:

<img name=mid dynsrc=about:blank loop=infinite width=1 height=1>

　　 其中LOOP就是用来控制循环次数的.about blank 表示目前什么也没有.很简单不是吗?也许现在你也想到该如何控制它来播放媒体文件了.是的,关键就是控制dynsrc这个属性.那么很显然,要使用script 了.目前大多数客户端浏览器都支持客户端脚本.程序思路如下:

<script>

function play(song)

{

if(document.mid.dynsrc==about:blank)

{

 document.mid.dynsrc=song

 bname.value=stop

 }

 else 

 {

 document.mid.dynsrc=about:blank

 bname.value=play

 }

}

</script>

　  很简单.通过一个条件逻辑来判断,是否播放.通过传递的参数song来决定播放的曲目..

　  由于脚本语言,并不强调类型,而是运行时动态绑定.并且它并不存在编译环节.因此不用事先申明.HTML中的运行标签如下:

<img name=mid dynsrc=about:blank loop=infinite width=1 height=1>

<input type=button id=bname

onclick=play(midSelect.options[midSelect.selectedIndex].value) value=play style=color: #FFFFCC; border-style: outset; border-width: 0 />

 

 <select size=1 name=midSelect

onChange=play(midSelect.options[midSelect.selectedIndex].value)>

  <option>请选择歌曲</option>

  <option value=http://music.21youth.com/mp3/en/secret/1/adagio.mp3>adagio</option>

  <option value=http://music.21youth.com/mp3/en/secret/3/dreamcatcher.mp3>Dreamcatcher</option>