[jquery] 網頁內嵌音訊檔

最近接的兩個case中，一個要在網頁裏放影片，一個要在網頁裏放影片加音樂

翻了一下一些網路上的jquery liberary，也試了好幾個，不過不知道是我沒有翻到他們的API還是我太弱不知道怎麼用，好幾個都只是很簡單播放功能而已

因為我那兩個的case是某研究的實驗問卷性質,，所以都需要限制使用者的瀏覽行為
像是一定要看完影片或是聽完音樂才能按下一步，又或是要看播了網頁上的「我已看完說明」的按鈕就馬上開始播放音樂，諸如此類的...

音樂播放的話，我個人會推薦 jplayer
它是一個適用於html5 和Flash的jquery liberary

我推薦它的原因有幾個

• 官網上的說明蠻詳細的，有很多教學的範例
• 它可以控制影音的功能夠齊全，最基本的播放、停止、暫停，然後比較進階的像是從幾秒開始播放、重覆播放、靜音等等
• 有齊全的event事件可以抓取, 只要設定特定事件的listener, 便可作很多控制了!
• player interface有豐富的css module可供使用，都在官網上面可以找到

在這來個簡單的範例好了

首先要把jquery.jplayer.min.js載下來，嵌到你的網頁裏，'js/'是我自己放javascript的目錄
要是想要用遠端檔案的話也是可以。

當然...jquery.js是必要的，不過我懶得貼上來了

然後，最簡單的嵌進一個音樂mp3檔


至於UI方面的話, 因為我還沒有需要用到, 所以也沒有特別去看
便大概應該就是設定一些CSS屬性而已
有需要的人可以去官網裡, 有教學

至於影音方面，比較遺憾的是他只支援 .m4v 跟 .ogv 檔

下次再來介紹一次有甚麼好用的video player liberary