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 ，效果不錯，你們也都比較承認。