现在的位置: 首页 > 综合 > 正文

jsp网页视频播放器

2013年10月18日 ⁄ 综合 ⁄ 共 2817字 ⁄ 字号 评论关闭

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

  目前许多在线视频网站都采用此视频格式。如搜狐视频、新浪播客、六间房、56、优酷、酷6、土豆,youtube等。FLV已经成为当前视频文件的主流格式。
  但是,选择使用哪种播放器却是一个问题。在网上查了一下,使用到的网页播放器有jarisjwplayervideobox,其实flowplayerCuPlayerMiniV10酷播迷你Flvplayer也都是不错的选择。由于jaris是开源免费的,推荐使用;此外jwplayer酷播、flowplayer是闭源的因此在商业项目上应用的话需要通过授权或购买使用。

  下载地址及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格式的播放,可以说支持的格式最多也比较稳定。

  界面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>

  这样就可以实现视频的播放了,

  
  

   最后我把这个工程的源代码贴出来,需要的朋友可以下载看看:http://dl.vmall.com/c0o2rddzlf
   另外,在网上找了一些开源的视频播放器,地址如下:http://blog.lixiphp.com/10-top-free-opensource-flv-player/            http://my.oschina.net/darcyzhu/blog/13103

抱歉!评论已关闭.