JWPlayer GrindPlaer CuPlayer播放器使用心得

项目中有使用rtmp进行直播，所以需要支持rtmp协议的视频播放器，用于前端播放直播流。

我先后用过GrindPlayer JWPlayer CuPlayer

GrindPlayer是无意中，配置nginx-rtmp服务器(windows版)，发现的自带的一款浏览器，延迟较低，但清晰度不够，相对于其他的浏览器来说，它的显示效果不够平滑。感觉有锯齿。

GrindPlayer

1.引入相关的资源文件和js文件

2.使用播放器

var pqs = new ParsedQueryString();
	var parameterNames = pqs.params(false);
	 
	var parameters = {
	    src:config.src,
		autoPlay: "true",
		verbose: true,
		controlBarAutoHide: "true",
		controlBarPosition: "bottom",
		poster: "images/poster.png",
		javascriptCallbackFunction: "jsbridge",
		plugin_hls: basepath+"/view/source/player/flashlsOSMF.swf",
		hls_minbufferlength: -1,
		hls_maxbufferlength: 30,
		hls_lowbufferlength: 3,
		hls_seekmode: "KEYFRAME",
		hls_startfromlevel: -1,
		hls_seekfromlevel: -1,
		hls_live_flushurlcache: false,
		hls_info: true,
		hls_debug: false,
		hls_debug2: false,
		hls_warn: true,
		hls_error: true,
		hls_fragmentloadmaxretry : -1,
		hls_manifestloadmaxretry : -1,
		hls_capleveltostage : false,
		hls_maxlevelcappingmode : "downscale"
	};

	for (var i = 0; i < parameterNames.length; i++) {
		var parameterName = parameterNames[i];
		parameters[parameterName] = pqs.param(parameterName) ||
		parameters[parameterName];
	}

	var wmodeValue = "direct";
	var wmodeOptions = ["direct", "opaque", "transparent", "window"];
	if (parameters.hasOwnProperty("wmode"))
	{
		if (wmodeOptions.indexOf(parameters.wmode) >= 0)
		{
			wmodeValue = parameters.wmode;
		}
		delete parameters.wmode;
	}

	// Embed the player SWF:
	swfobject.embedSWF(
			basepath+"/view/source/player/GrindPlayer.swf"
		, id
		, config.width||500
		, config.height||480
		, "10.1.0"
		, "expressInstall.swf"
		, parameters
		, {
			allowFullScreen: "true",
			wmode: wmodeValue
		}
		, {
			name: "GrindPlayer"
		}
	);

代码比较繁琐

JWPlayer

1.引入相关资源文件

2.代码：

 jwplayer(id).setup({
	    	//flashplayer: "${path}/components/jwplayer/jwplayer.flash.swf",  
	        sources:[{file:config.src}] ,
	        
	        primary:"flash",
	        width: config.width||500,  
	        height: config.height||350,  
	        dock: false,
	        autostart:true,
	        rtmp:{
	        	bufferlength:0.5
	        }
	    });

CuPlayer

1.引入资源文件

2.代码：

var w=config.width.replace("px","");
	var h=config.height.replace("px","");
	var so = new SWFObject(basepath+"/view/source/player/cuplayer/player.swf","play_"+id,w,h,"9","#000000");
	so.addParam("allowfullscreen","true");
	so.addParam("allowscriptaccess","always");
	so.addParam("wmode","opaque");
	so.addParam("quality","high");
	so.addParam("salign","lt");
	//播放器设置文件-----------------------------
	//so.addVariable("JcScpFile",basepath+"/view/source/player/cuplayer/CuSunV2set.xml");
	so.addVariable("JcScpFile",basepath+"/system/playerParam");
	so.addVariable("JcScpShowRightmenu","no");
	//视频文件及略缩图--------------------------
	so.addVariable("JcScpServer",config.rtmpserver);
	so.addVariable("JcScpVideoPath",config.rtmpid); 
	so.addVariable("JcScpImg",basepath+"/view/source/player/images/startpic.jpg"); 
	//-前置Flash广告-----------------------------
	so.addVariable("ShowJcScpAFront","no");
	 
	//-视频广告参数-----------------------------
	so.addVariable("ShowJcScpAVideo","no");
 
	//-暂停广告参数-----------------------------
	so.addVariable("ShowJcScpAPause","no");
	 
	//-角标广告参数-----------------------------
	so.addVariable("ShowJcScpACorner","no");
	 
	//-后置广告参数----------------------------
	so.addVariable("ShowJcScpAEnd","no");
	 
	//-----------------------------------------
	so.addVariable("JcScpSharetitle","聚通播放器"); 
	so.write(id);

注意事项：使用CuPlayer时，有个xml配置，而java开发很多都是xml配置文件，如果开放xml静态资源的话，可能会导致项目登陆或是其他一些莫名其妙的问题。于是我将xml的静态化配置取消，做成了动态加载xml的方式。效果很不错。

CuPlayer的前端效果很不错，有延迟的时候，会有loading而且还有百分比进度，很人性化，值得注意的是，它能够自定义各种参数，比如不需要右侧按钮(开灯、分享等)，只需要设置JcScpShowRightmenu = "no"，就可以取消，还可以自定logo 只是目前还不知道能不能把CuPlayer的样式去掉。

JWPlayer的问题，在于缓存，有时候虽然在推流，但播放器卡在那里，等待一段时间，才播卡顿的时间的内容，而不是实时的内容。另外有时候loading不会消失。手机端无法加载播放器

尝试过videojs ，效果也很不错，不知道是什么原因，画面只有大约八分之一，如果哪位大牛知道，希望能给点建议，我也查过资料，好像是videojs对chrome支持的问题。但最终没能找到解决方法

也试过ckplayer ，发现根本没办法像别人说的那样正常使用，浏览器是chrome浏览器，可能还是存在兼容问题吧。

最终选择了CuPlayer ，效果不错，大家也都比较认可。

来源：oschina

链接：https://my.oschina.net/u/2457585/blog/738203

标签

播放器