当前页面: 开发资料首页 → Javascript 专题 → 网页中的媒体播放器

网页中的媒体播放器

摘要: 网页中的媒体播放器

本文纯属好玩写的,基本上我想对各位也没什么帮助,但是如果你看看也许会觉得很好玩.至少可以那来骗MM,不过,现在的MM很厉害,也许也骗不了所以就当我混文章,自娱自乐吧.

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

其中LOOP就是用来控制循环次数的.about blank 表示目前什么也没有.很简单不是吗?也许现在你也想到该如何控制它来播放媒体文件了.是的,关键就是控制dynsrc这个属性.那么很显然,要使用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中的运行标签如下:

<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>

那么好了,一个非常简单的播放器就做好啦,复杂的,你就加入一些美工和特效,再加入一些辅助功能.(完)

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 双向链表&
后一篇: 留言薄+留言薄==BBS