最近在做一个类似优酷在线播放的网站。视频上传部分已经解决,用的是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>
这样就可以实现视频的播放了,