|
本文纯属好玩写的,基本上我想对各位也没什么帮助,但是如果你看看也许会觉得很好玩.至少可以那来骗MM,不过,现在的MM很厉害,也许也骗不了所以就当我混文章,自娱自乐吧.
经常可以看到一些网络中有使用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>
<option value="http://music.21youth.com/mp3/en/secret/2/appassionata.mp3">Appassionata</option>
<option value="http://music.21youth.com/mp3/en/secret/3/aquarell.mp3">Aquarell</option>
<option value="http://music.21youth.com/mp3/en/secret/1/songfrom.mp3">Songs From A Secret Garden</option>
<option value="http://music.21youth.com/mp3/en/secret/4/greenwaves.MP3">GreenWaves</option>
<option value="http://music.21youth.com/mp3/en/secret/3/inourtears.mp3">InOurTears</option>
<option value="http://music.21youth.com/mp3/en/secret/1/serenadetospring.mp3">SerenadeToSpring</option>
<option value="http://music.21youth.com/mp3/en/secret/1/nocturne.mp3">Nocturne</option>
<option value="http://music.21youth.com/mp3/en/secret/4/elegie.MP3">Elegie</option>
</select></p>
那么好了,一个非常简单的播放器就做好啦,复杂的,你就加入一些美工和特效,再加入一些辅助功能.(完)
|
