最近在做一個類似優(yōu)酷在線播放的網(wǎng)站。視頻上傳部分已經(jīng)解決,用的是structs2自帶的上傳組件,然后就開始做視頻播放部分。參考了目前主流的視頻網(wǎng)站,他們的視頻基本上都是基于flv的,因為它形成的文件極小、加載速度極快,使得網(wǎng)絡(luò)觀看視頻文件成為可能,它的出現(xiàn)有效地解決了視頻文件導(dǎo)入Flash后,使導(dǎo)出的SWF文件體積龐大,不能在網(wǎng)絡(luò)上很好的使用等缺點(diǎn)。
目前許多在線視頻網(wǎng)站都采用此視頻格式。如搜狐視頻、新浪播客、六間房、56、優(yōu)酷、酷6、土豆,youtube等。FLV已經(jīng)成為當(dāng)前視頻文件的主流格式。
但是,選擇使用哪種播放器卻是一個問題。在網(wǎng)上查了一下,使用到的網(wǎng)頁播放器有jaris、jwplayer、videobox,其實flowplayer、CuPlayerMiniV10酷播迷你、Flvplayer也都是不錯的選擇。由于jaris是開源免費(fèi)的,推薦使用;此外jwplayer與酷播、flowplayer是閉源的因此在商業(yè)項目上應(yīng)用的話需要通過授權(quán)或購買使用。
下載地址及demo實例代碼如下: http://jarisflvplayer.org/
http://videobox-lb.sourceforge.net/
http://www.longtailvideo.com/players/jw-flv-player/
http://flowplayer.org/
http://www.89525.com/FlvPlayer/
在實際使用中:
jaris與酷播、videobox(videoBox使用的播放器是外掛的flvplayer及wmp)均支持flv及mp4格式的播放,jwplayer除支持前兩種格式外還支持swf及mp3格式的播放,可以說支持的格式最多也比較穩(wěn)定。
界面UI方面:
jaris做的最好并且定制性最強(qiáng)(支持視頻預(yù)覽圖片的添加及默認(rèn)視頻窗口的圖片圖換),videoBox使用的jQuery特效也不錯,適于彈出播放的模式;jwplayer與flowplayer算是中規(guī)中矩,與一般的視頻播放網(wǎng)站,如優(yōu)庫等UI類似,值得一提的是jwplayer提供了視頻地址分享的功能,但是可定制性不強(qiáng)。此外,酷播的外掛廣告等功能需要商業(yè)付費(fèi)不在此討論范圍中。
在項目里,我使用的是 jaris。先去官方網(wǎng)站http://jarisflvplayer.org/ 下載播放器,
點(diǎn)擊下載解壓,進(jìn)入bin目錄,這一個自帶的例子,但是我們需要修改一下才可以運(yùn)行。
用記事本打開index.html,修改一下代碼:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Jaris FLV Player</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="language" content="en" />
- <meta name="description" content="" />
- <meta name="keywords" content="" />
-
- <script src="js/swfobject.js" type="text/javascript"></script>
- <script type="text/javascript">
- var flashvarsVideo = {
- source: "videos/ad.mp4",//資源視頻文件位置
- type: "video",
- streamtype: "file",
- server: "",//Used for rtmp streams//用于流媒體
- duration: "52",
- poster:"images/as.png"http://視頻縮略圖
- autostart: "true",//是否自動播放
- logo: "logo.png",//播放器頁面,必須用到
- logoposition: "top left",
- logoalpha: "30",
- logowidth: "130",
- logolink: "http://jaris.sourceforge.net",
- hardwarescaling: "false",
- darkcolor: "000000",
- brightcolor: "4c4c4c",
- controlcolor: "FFFFFF",
- hovercolor: "67A8C1"
- };
-
- var params = {//播放器控制參數(shù)
- menu: "false",
- scale: "noScale",
- allowFullscreen: "true",
- allowScriptAccess: "always",
- bgcolor: "#000000",
- quality: "high",
- wmode: "opaque"
- };
- var attributes = {
- id:"JarisFLVPlayer"
- };
- swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "576px", "360px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);
- </script>
- <style>
- html, body { height:100%; }
- body { margin:0; }
- </style>
- </head>
- <body>
- <br />
- <center>
- <h1>Video Example</h1>
- <div id="altContentOne">//視頻播放
- <h1>Jaris FLV Player</h1>
- <p>Alternative content</p>
- <p><a /></a></p>
- </div>
- </center>
- </body>
- </html>
這樣就可以實現(xiàn)視頻的播放了,
最后我把這個工程的源代碼貼出來,需要的朋友可以下載看看:http://dl.vmall.com/c0o2rddzlf
另外,在網(wǎng)上找了一些開源的視頻播放器,地址如下:http://blog.lixiphp.com/10-top-free-opensource-flv-player/ http://my.oschina.net/darcyzhu/blog/13103
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請
點(diǎn)擊舉報。