jsp网页视频播放器

WindySky 2017-03-09

展开全文

最近在做一个类似优酷在线播放的网站。视频上传部分已经解决，用的是structs2自带的上传组件，然后就开始做视频播放部分。参考了目前主流的视频网站，他们的视频基本上都是基于flv的，因为它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。

目前许多在线视频网站都采用此视频格式。如搜狐视频、新浪播客、六间房、56、优酷、酷6、土豆，youtube等。FLV已经成为当前视频文件的主流格式。

但是，选择使用哪种播放器却是一个问题。在网上查了一下，使用到的网页播放器有jaris、jwplayer、videobox，其实flowplayer、CuPlayerMiniV10酷播迷你、Flvplayer也都是不错的选择。由于jaris是开源免费的，推荐使用；此外jwplayer与酷播、flowplayer是闭源的因此在商业项目上应用的话需要通过授权或购买使用。

下载地址及demo实例代码如下：

http:///
http://videobox-lb./
http://www./players/jw-flv-player/
http:///
http://www./FlvPlayer/

在实际使用中：

jaris与酷播、videobox(videoBox使用的播放器是外挂的flvplayer及wmp)均支持flv及mp4格式的播放，jwplayer除支持前两种格式外还支持swf及mp3格式的播放，可以说支持的格式最多也比较稳定。

界面UI方面：

jaris做的最好并且定制性最强(支持视频预览图片的添加及默认视频窗口的图片图换)，videoBox使用的jQuery特效也不错，适于弹出播放的模式；jwplayer与flowplayer算是中规中矩，与一般的视频播放网站，如优库等UI类似，值得一提的是jwplayer提供了视频地址分享的功能，但是可定制性不强。此外，酷播的外挂广告等功能需要商业付费不在此讨论范围中。

在项目里，我使用的是 jaris。先去官方网站http:/// 下载播放器，

点击下载解压，进入bin目录，这一个自带的例子，但是我们需要修改一下才可以运行。

用记事本打开index.html，修改一下代码：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./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.",
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>