2011年5月6日 星期五

[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
Powered By Blogger

Label Cloud

2009 (1) 不能連localhost (1) 內嵌音訊 (1) 求職 (1) 面試 (1) 音樂 (1) 動畫師 (1) 帳號管理 (1) 排程 (1) 畢展 (1) 創意市集 (1) 惡意程式 (1) 電腦動畫 (1) 權限管理 (1) adobe (1) android (4) animation (1) animator (1) apache (3) art (5) art taipei 2008 (1) audio (2) bbs (1) birthday (1) black and white (1) browser (2) career (2) certification (1) cgw (1) cinematography (1) code (3) Collie (1) color (2) command (16) competition (1) computer science (3) connection (1) cover (1) crafyJS (1) creative (1) CSS (1) DBN (2) design (7) developer (1) display (1) drawing (1) eclipse (3) embed (1) engine (1) EntityJS (1) exception (1) exhibition (1) flower (1) frame (1) freebsd (11) french (1) friends (3) function (1) game (1) google (2) graphic (3) html (2) HTML5 (1) https (1) illustrator (1) image processing (1) interactive storytelling (1) internet (3) interview (1) introduce (1) ip (1) japan (1) java (4) javascript (3) JIT (1) jmonkey (1) job (1) jquery (1) LAMP (1) LimeJS (1) linux (8) liquid galaxy (1) ListView (1) localhost (1) log (1) mail (1) marquee (1) midi (1) mime-type (1) mis (1) MIT (2) mo-cap (1) mobile (1) Modernizr (1) motion capture (1) movie (1) music (3) narrative (2) NCCU (3) news (1) note (10) originality (1) otaku (1) painting (4) performance (1) photography (2) photoshop (7) php (1) player modelling (1) poster (1) postfix (1) programming (5) QuarkJS (1) resource (1) schema (1) scroll (1) self aware (1) semantic (1) server (1) share (1) sketch (2) software (4) solve (2) Sonivox (1) speaking (1) ssl (1) SSLPeerUnverifiedException (1) streaming (1) Subversion (1) sunspider (1) SVN (3) svn server (1) system (1) taipei (1) test (1) tfam (1) tool (1) TortoiseSVN (1) tutor (1) ubuntu (3) update (1) uri (1) video (1) vim (1) w3c (1) wap wcss css css2.0 (1) web (8) WebGL (1) webkit (2) well-form (1) wiimote (1) wiiusej (1) workshop (1) xhtml (1) xml (2)