網頁中的媒體播放器

本文純屬好玩寫的,基本上我想對各位也沒什麼協助,但是如果你看看也許會覺得很好玩.至少可以那來騙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>

 

那麼好了,一個非常簡單的播放器就做好啦,複雜的,你就加入一些美工和特效,再加入一些協助工具功能.(完)