最近在做一个类似优酷在线播放的网站。视频上传部分已经解决,用的是structs2自带的上传组件,然后就开始做视频播放部分。参考了目前主流的视频网站,他们的视频基本上都是基于flv的,因为它形成的文件极小、加载速度极快,使得网络观看视频文件成为可能,它的出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,不能在网络上很好的使用等缺点。
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格式的播放,可以说支持的格式最多也比较稳定。
界面UI方面:
jaris做的最好并且定制性最强(支持视频预览图片的添加及默认视频窗口的图片图换),videoBox使用的jquery特效也不错,适于弹出播放的模式;jwplayer与flowplayer算是中规中矩,与一般的视频播放网站,如优库等UI类似,值得一提的是jwplayer提供了视频地址分享的功能,但是可定制性不强。此外,酷播的外挂广告等功能需要商业付费不在此讨论范围中。
在项目里,我使用的是 jaris。先去官方网站http://jarisflvplayer.org/ 下载播放器,
点击下载解压,进入bin目录,这一个自带的例子,但是我们需要修改一下才可以运行。
用记事本打开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"//视频缩略图 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 = {//播放器控制参数 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 href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> </center> </body> </html>这样就可以实现视频的播放了,