|
|
相关文章推荐
|
直爽的黑框眼镜 · Java如何判断时间是否在15:15 - ...· 2 月前 · |
|
|
另类的手链 · node中XML格式转换成Json/Stri ...· 11 月前 · |
|
|
踢足球的鼠标 · groovy中List调用findAll与c ...· 1 年前 · |
|
|
豁达的针织衫 · 网络工程师的Python之路---Ansib ...· 1 年前 · |
|
|
傲视众生的小狗 · JS多图预览、删除、上传（详细） - 简书· 1 年前 · |
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/eguid_1/article/details/51898912
一、几种播放器选择
那么播放器，已经不再更新的以及收费的，这里不会进行介绍，只介绍两种轻量级的开源播放器。
1、videoJS
对于HTML5支持非常棒，可以自动在flash和html5播放器之间进行切换，videoJS可以兼容到IE8，它提供的界面非常简洁，需要对界面进行二次开发。
2、ckPlayer
这个播放器是国产播放器，功能有很多，只简单介绍两个功能，（1）提供手动切换html5和flash功能（2）提供了关灯开灯功能。完全可以满足国内开发的需求（3）它内置了大量的广告位，比如片头广告，暂停广告，片尾广告，缓冲广告，切点广告，滚动文字广告，以及满足权限关闭广告的功能....秒懂国内看视频就是广告比较多。
二、videoJS播放器嵌入页面及api介绍
1、创建videoJS播放器实例
（1）调用swf文件
<script type="text/javascript">videojs.options.flash.swf = "player/video-js.swf";</script>
（2）配置初始化参数
<!-- data-setup{}可以控制播放器的一些功能；autoplay:true/false，是否自动播放；preload：auto\none\meta，自动加载\不加载\加载元数据 --> <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="img/eguidlogo.png" width="640" height="360" data-setup='{ "html5" : { "nativeTextTracks" : false } }'> <source src='rtmp://192.168.30.21/live/' type='rtmp/flv' /> </video>
如果播放的是普通视频，需要修改<source src='视频地址' type='video/mp4或者video/flv'/>
type里面放 ‘ video/视频格式 ’ 即可
（3）创建播放器实例
//播放器实例
var player = videojs('videoPlayer');
补充：videojs会根据浏览器自动切换flash和html5播放模式
2、videoJS常用api：
* 根据videoJS官方文档编写的播放器常用操作 //获取当前类型 function getCurrentType(idnex) { return idnex.currentType(); //获取当前播放地址 function getCurrentAddr(index) { return index.currentSrc(); //获取当前播放时间 function getCurrentTime(index) { return index.currentTime(); //获取当前网络状态 function networkState(index) { return index.networkState(); //修改播放地址 function setsrc(index, url, type) { index.src({ type : type, src : url //重载播放器 function reset(index) { index.reset(); index.load(); function play(index) { index.play(); function pause(index) { index.pause();3、videoJS菜单界面二次开发
简单实现清晰度控制和创建清晰度菜单
//播放器实例 var player = videojs('videoPlayer'); //播放器初始化操作面板清晰度菜单 function playerInitVideo() { $videoPanelMenu = $(".vjs-fullscreen-control"); $videoPanelMenu.before('<div class="vjs-subtitles-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true">' + '<div class="vjs-menu" role="presentation">' + '<ul class="vjs-menu-content" role="menu">' + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" οnclick="changeUrl(this)">高清</li>' + '<li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" οnclick="changeUrl(this)">标清 </li>' + '</ul></div><span class="vjs-control-text">清晰度</span></div>'); //加载页面进行播放器初始化 player.ready(function() { playerInitVideo(); //player.play(); //setsrc(player,"rtmp://192.168.30.21/live/test3","rtmp/flv"); //通过id获取DOM function get(index) { return document.getElementById(index); //修改播放地址并播放 function writeAddressAndPlay(index,url,type) { //播放器操作 setsrc(index, url, type?type:"rtmp/flv"); play(index); //高清标清切换就是应用名加减HD function changeUrl(video) { var index = $(video).text(); //获取当前播放的url var CurrentUrl = getCurrentAddr(player); $(".vjs-menu-item").removeClass("vjs-selected"); $(video).addClass("vjs-selected"); if (index == "高清") { if (CurrentUrl.indexOf("HD") == -1) { CurrentUrl = CurrentUrl + "HD"; } else { return; } else { if (CurrentUrl.indexOf("HD") != -1) { CurrentUrl = CurrentUrl.replace("HD", ""); } else { return; //修改地址并播放 writeAddressAndPlay(player, CurrentUrl);(function() { var CKobject = { _K_: function(d){return document.getElementById(d);}, _T_: false, _M_: false, _G_: false, _Y_: false, _I_: null, _J_: 0, _O_: {}, uaMatch:function(u,rMsie,rFirefox,rOpera,rChrome,rSafari,rSafari2,mozilla,mobile){ var match = rMsie.exec(u); if (match != null) { return { b: 'IE', v: match[2] || '0' match = rFirefox.exec(u); if (match != null) { return { b: match[1] || '', v: match[2] || '0' match = rOpera.exec(u); if (match != null) { return { b: match[1] || '', v: match[2] || '0' match = rChrome.exec(u); if (match != null) { return { b: match[1] || '', v: match[2] || '0' match = rSafari.exec(u); if (match != null) { return { b: match[2] || '', v: match[1] || '0' match = rSafari2.exec(u); if (match != null) { return { b: match[1] || '', v: match[2] || '0' match = mozilla.exec(u); if (match != null) { return { b: match[1] || '', v: match[2] || '0' match = mobile.exec(u); if (match != null) { return { b: match[1] || '', v: match[2] || '0' else { return { b: 'unknown', v: '0' browser: function() { var u = navigator.userAgent, rMsie = /(msie\s|trident.*rv:)([\w.]+)/, rFirefox = /(firefox)\/([\w.]+)/, rOpera = /(opera).+version\/([\w.]+)/, rChrome = /(chrome)\/([\w.]+)/, rSafari = /version\/([\w.]+).*(safari)/, rSafari2 = /(safari)\/([\w.]+)/, mozilla = /(mozilla)\/([\w.]+)/, mobile = /(mobile)\/([\w.]+)/; var c = u.toLowerCase(); var d = this.uaMatch(c,rMsie,rFirefox,rOpera,rChrome,rSafari,rSafari2,mozilla,mobile); if (d.b) { b = d.b; v = d.v; return {B: b, V: v}; Platform: function() { var w = ''; var u = navigator.userAgent, app = navigator.appVersion; var b = { iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, iPad: u.indexOf('iPad') > -1, ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, webKit: u.indexOf('AppleWebKit') > -1, trident: u.indexOf('Trident') > -1, gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, presto: u.indexOf('Presto') > -1, mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), webApp: u.indexOf('Safari') == -1 for (var k in b) { if (b[k]) { w = k; break; return w; isHTML5:function(){ return !!document.createElement('video').canPlayType; getType:function(){ return this._T_; getVideo: function() { var v = ''; var s = this._E_['v']; if (s && s.length>1) { for (var i = 0; i < s .length; i++) { var a = s[i].split('- > '); if (a.length >= 1 && a[0] != '') { v += ' < source src ="' + a[0] + '" '; if (a.length > = 2 && a[1] != '') { v += ' type="' + a[1] + '"'; v += '>'; return v; getVars: function(k) { var o=this._A_; if (typeof(o) == 'undefined') { return null; if (k in o) { return o[k]; } else { return null; getParams: function() { var p = ''; if (this._A_) { if (parseInt(this.getVars('p')) == 1) { p += ' autoplay="autoplay"'; if (parseInt(this.getVars('e')) == 1) { p += ' loop="loop"'; if (parseInt(this.getVars('p')) == 2) { p += ' preload="metadata"'; if (this.getVars('i')) { p += ' poster="' + this.getVars('i') + '"'; return p; getpath: function(z) { var f='CDEFGHIJKLMNOPQRSTUVWXYZcdefghijklmnopqrstuvwxyz'; var w=z.substr(0,1); if(f.indexOf(w)>-1 && (z.substr(0,4)==w+'://' || z.substr(0,4)==w+':\\')){ return z; var d = unescape(window.kk).replace('file:///', ''); var k = parseInt(document.location.port); var u = document.location.protocol + '//' + document.location.hostname; var l = '', e = '', t = ''; var s = 0; var r = unescape(z).split('//'); if (r.length > 0) { l = r[0] + '//' var h = 'http|https|ftp|rtsp|mms|ftp|rtmp|file'; var a = h.split('|'); if (k != 80 && k) { u += ':' + k; for (i = 0; i < a .length; i++) { if ((a[i] + '://') == l) { s = 1; break; if (s == 0) { if (z.substr(0, 1) == '/') { t = u + z; } else { e = d.substring(0, d.lastIndexOf('/') + 1).replace('\\', '/'); var w = z.replace('../', './'); var u = w.split('./'); var n = u.length; var r = w.replace('./', ''); var q = e.split('/'); var j = q.length - n; for (i = 0; i < j; i++) { t + = q[i] + '/'; t + = r; } else { t = z; return t; getXhr: function() { var x; try { x = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { x = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) { x = false; if (!x && typeof XMLHttpRequest ! = 'undefined') { x = new XMLHttpRequest(); return x; getX: function(){ var f ='ckstyle()'; if (this.getVars('x') && parseInt(this.getVars('c'))! =1 ) { f =this.getVars('x')+'()'; try { if (typeof(eval(f)) == 'object') { this._X_ = eval(f); } catch(e) { try { if (typeof(eval(ckstyle)) == 'object') { this._X_ = ckstyle(); } catch(e) { this._X_ = ckstyle(); getSn: function(s, n) { if(n > =0){ return this._X_[s].split(',')[n]; else{ return this._X_[s]; getUrl: function(L, B) { var b = ['get', 'utf-8']; if (L && L.length == 2) { var a = L[0]; var c = L[1].split('/'); if (c.length >= 2) { b[0] = c[1]; if (c.length >= 3) { b[1] = c[2]; this.ajax(b[0], b[1], a, function(s) { var C = CKobject; if (s && s != 'error') { var d = '', e = s; if (s.indexOf('}') > -1) { var f = s.split('}'); for (var i = 0; i < f .length - 1; i++) { d + = f[i] + '}'; var h = f[i].replace('{', '').split('- > '); if (h.length == 2) { C._A_[h[0]] = h[1]; e = f[f.length - 1]; C._E_['v'] = e.split(','); if (B) { C.showHtml5(); } else { C.changeParams(d); C.newAdr(); getflashvars: function(s) { var v = '', i = 0; if (s) { for (var k in s) { if (i > 0) { v += '&'; if (k == 'f' && s[k] && ! this.getSn('pm_repc',-1)) { s[k] = this.getpath(s[k]); if (s[k].indexOf('&') > -1) { s[k] = encodeURIComponent(s[k]); if (k == 'y' && s[k]) { s[k] = this.getpath(s[k]); v += k + '=' + s[k]; return v; getparam: function(s) { var w = '', v = '', o = { allowScriptAccess: 'always', allowFullScreen: true, quality: 'high', bgcolor: '#000' if (s) { for (var k in s) { o[k] = s[k]; for (var e in o) { w += e + '="' + o[e] + '" '; v += ' < param name ="' + e + '" value ="' + o[e] + '" /> '; w = w.replace('movie=', 'src='); return { w: w, getObjectById: function(s) { if (this._T_) { return this; var x = null, y = this._K_(s), r = 'embed'; if (y && y.nodeName == 'OBJECT') { if (typeof y.SetVariable != 'undefined') { x= y; } else { var z = y.getElementsByTagName(r)[0]; if (z) { x= z; return x; ajax: function(b, u, s, f) { var x = this.getXhr(); var a = [], m = ''; if (b == 'get') { if (s.indexOf('?') > -1) { m = s + ' &t =' + new Date().getTime(); } else { m = s + '?t=' + new Date().getTime(); x.open('get', m); } else { a = s.split('?'); s = a[0], m = a[1]; x.open('post', s, true); x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); x.setRequestHeader('charset', u); if (b == 'post') { x.send(m); } else { x.send(null); x.onreadystatechange = function() { if (x.readyState == 4) { var g = x.responseText; if (g != '') { f(g); } else { f(null); addListener: function(e, f) { var o=CKobject._V_; if (o.addEventListener) { o.addEventListener(e, f, false); catch (e) { this.getNot(); else if (o.attachEvent) { o.attachEvent('on' + e, f); catch(e){ this.getNot(); else { o['on' + e] = f; removeListener: function( e, f) { var o=CKobject._V_; if (o.removeEventListener) { o.removeEventListener(e, f, false); catch(e){ this.getNot(); else if (o.detachEvent) { o.detachEvent('on' + e, f); catch(e){ this.getNot(); else { o['on' + e] = null; Flash: function() { var f = false,v = 0; if (document.all || this.browser()['B'].toLowerCase().indexOf('ie')>-1) { try { var s = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); f = true; var z = s.GetVariable('$version'); v = parseInt(z.split(' ')[1].split(',')[0]); } catch(e) {} } else { if (navigator.plugins && navigator.plugins.length > 0) { var s = navigator.plugins['Shockwave Flash']; if (s) { f = true; var w = s.description.split(' '); for (var i = 0; i < w .length; ++i) { if (isNaN(parseInt(w[i]))) continue; v = parseInt(w[i]); return { f: f, embed:function(f,d,i,w,h,b,v,e,p,j){ var s =['all']; if(b){ if(this.isHTML5()){ this.embedHTML5(d,i,w,h,e,v,s,j); else{ this.embedSWF(f,d,i,w,h,v,p); else{ if(this.Flash()['f'] && parseInt(this.Flash()['v']) > 10){ this.embedSWF(f,d,i,w,h,v,p); else if(this.isHTML5()){ this.embedHTML5(d,i,w,h,e,v,s,j); else{ this.embedSWF(f,d,i,w,h,v,p); embedSWF: function(C, D, N, W, H, V, P) { if (!N) { N = 'ckplayer_a1' if (!P) { P = { bgcolor: '#FFF', allowFullScreen: true, allowScriptAccess: 'always', wmode:'transparent' this._A_=V; this.getX(); var u = 'undefined', g = false, j = document, r = 'http://www.macromedia.com/go/getflashplayer', t = ' < a href ="' + r + '" target ="_blank" > 请点击此处下载安装最新的flash插件 </ a > ', error = { w: '您的网页不符合w3c标准，无法显示播放器', f: '您没有安装flash插件，无法播放视频，' + t, v: '您的flash插件版本过低，无法播放视频，' + t w3c = typeof j.getElementById != u && typeof j.getElementsByTagName != u && typeof j.createElement != u, i = 'id="' + N + '" name="' + N + '" ', s = '', l = ''; P['movie'] = C; P['flashvars'] = this.getflashvars(V); if(W==-1){ d=true; this._K_(D).style.width='100%'; W='100%'; s += ' < object pluginspage ="http://www.macromedia.com/go/getflashplayer" '; s + = 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; s + = 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" '; s + = 'width="' + W + '" '; s + = 'height="' + H + '" '; s + = i; s + = 'align="middle" > '; s += this.getparam(P)['v']; s += ' < embed '; s + = this.getparam(P)['w']; s + = ' width ="' + W + '" height ="' + H + '" name ="' + N + '" id ="' + N + '" align ="middle" ' + i; s + = 'type="application/x-shockwave-flash" pluginspage ="' + r + '" /> '; s += ' </ object > '; if (!w3c) { l = error['w']; g = true; } else { if (!this.Flash()['f']) { l = error['f']; g = true; } else { if (this.Flash()['v'] < 11 ) { l = error['v']; g = true; } else { l = s; this._T_ =false; if (l) { this._K_(D).innerHTML = l; if (g){ this._K_(D).style.color = '#0066cc'; this._K_(D).style.lineHeight = this._K_(D).style.height; this._K_(D).style.textAlign = 'center'; embedHTML5: function(C, P, W, H, V, A, S, J) { this._E_ = { c: C, p: P, w: W, h: H, v: V, s: S, j: J ==undefined || J?true:false this._A_ = A; this.getX(); b = this.browser()['B'], v = this.browser()['V'], x = v.split('.'), t = x[0], m = b + v, n = b + t, w = '', s = false, f = this.Flash()['f'], a = false; if (!S) { S = ['iPad', 'iPhone', 'ios']; for (var i = 0; i < S.length; i++) { w = S[i]; if (w.toLowerCase() == 'all') { s = true; break; if (w.toLowerCase() == 'all+false' && !f) { s = true; break; if (w.indexOf('+') > -1) { w = w.split('+')[0]; a = true; } else { a = false; if (this.Platform() == w || m == w || n == w || b == w) { if (a) { if (!f) { s = true; break; }else { s = true; break; if (s) { if (V) { var l = V[0].split('->'); if (l && l.length == 2 && l[1].indexOf('ajax') > -1) { this.getUrl(l, true); return; this.showHtml5(); status: function() { this._H_ = parseInt(this.getSn('setup', 20)); var f='ckplayer_status'; if (this.getSn('calljs', 0)!='') { f=this.getSn('calljs', 0); try { if (typeof(eval(f)) == 'function') { this._L_=eval(f); this._M_=true; return true; } catch(e) { try { if (typeof(eval(ckplayer_status)) == 'function') { this._L_=ckplayer_status; this._M_=true; return true; } catch(e) { return false; return false; showHtml5: function() { var C = CKobject; var p = C._E_['p'], a = C._E_['v'], c = C._E_['c'], j = '', b = false; var s = this._E_['v']; var w=C._E_['w'],h=C._E_['h']; var d=false; var r=''; if(s.length==1){ r=' src="'+s[0].split('->')[0]+'"'; if(w==-1){ d=true; C._K_(c).style.width='100%'; w='100%'; if(w.toString().indexOf('%')>-1){ w='100%'; if(h.toString().indexOf('%')>-1){ h='100%'; if(C._E_['j']){ j='controls="controls"'; var v = ' < video '+j+r+' id ="' + p + '" width ="' + w + '" height ="' + h + '" ' + C.getParams() + ' > ' + C.getVideo() + ' </ video > '; C._K_(c).innerHTML = v; C._K_(c).style.backgroundColor = '#000'; C._V_ = C._K_(p); if(!d){ C._K_(c).style.width=C._E_['w'].toString().indexOf('%')>-1?(C._K_(c).offsetWidth*parseInt(C._E_['w'])*0.01)+'px':C._V_.width+'px'; C._K_(c).style.height=C._E_['h'].toString().indexOf('%')>-1?(C._K_(c).offsetHeight*parseInt(C._E_['h'])*0.01)+'px':C._V_.height+'px'; C._P_ = false; C._T_ = true; if (C.getVars('loaded')!='') { var f=C.getVars('loaded')+'()'; try { if (typeof(eval(f)) == 'function') { eval(f); } catch(e) { try { if (typeof(eval(loadedHandler)) == 'function') { loadedHandler(); } catch(e) { C.status(); C.addListener('play', C.playHandler); C.addListener('pause', C.playHandler); C.addListener('error', C.errorHandler); C.addListener('emptied', C.errorHandler); C.addListener('loadedmetadata', C.loadedMetadataHandler); C.addListener('ended', C.endedHandler); C.addListener('volumechange', C.volumeChangeHandler); if((C.getVars('m')!='' && C.getVars('m')!=null) || parseInt( C.getSn('setup', 0))>0){ C._K_(c).style.cursor='pointer'; if((C.getVars('m')!='' && C.getVars('m')!=null) || parseInt( C.getSn('setup', 1))==1){ C.addListener('click', C.html5Click); videoPlay: function() { if (this._T_) { this._V_.play(); videoPause: function() { if (this._T_) { this._V_.pause(); playOrPause: function() { if (this._T_) { if (this._V_.paused) { this._V_.play(); } else { this._V_.pause(); fastNext: function() { if (this._T_) { this._V_['currentTime'] = this._V_['currentTime'] + 10; fastBack: function() { if (this._T_) { this._V_['currentTime'] = this._V_['currentTime'] - 10; changeVolume: function(n) { if (this._T_) { this._V_['volume'] = n * 0.01; videoSeek: function(t) { if (this._T_) { this._V_['currentTime'] = t; newAddress: function(u) { var s = []; if (u) { s = this.isHtml5New(u); } else { return; if (s && this._T_) { this.changeParams(u); var l = s[0].split('->'); if (l && l.length == 2 && l[1].indexOf('ajax') > -1) { this.getUrl(l, false); return; this._E_['v'] = s; this.newAdr(); quitFullScreen:function() { if(document.cancelFullScreen) { document.cancelFullScreen(); else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); changeStatus:function(n){ this._H_=n; newAdr: function() { var s = this._E_['v']; this._V_.pause(); if(s.length==1){ this._V_.src=s[0].split('->')[0]; else{ this._V_['innerHTML'] = this.getVideo(); this._V_.load(); isHtml5New: function(s) { if (s.indexOf('html5') == -1) { return false; var a = s.replace(/{/g, ''); var b = a.split('}'); var c = ''; for (var i = 0; i < b .length; i++) { if (b[i].indexOf('html5') > -1) { c = b[i].replace('html5->', '').split(','); break; return c; changeParams: function(f) { if (f) { var a = f.replace(/{/g, ''); var b = a.split('}'); var c = ''; for (var i = 0; i < b .length; i++) { var d = b[i].split('- > '); if(d.length == 2){ switch(d[0]){ case 'p': if(parseInt(d[1]) == 1){ this._V_.autoplay = true; else if(parseInt(d[1]) == 2){ this._V_.preload = 'metadata'; else{ this._V_.autoplay = false; if(this._I_!=null){ clearInterval(this._I_); this._I_=null; break; case 'e': if(parseInt(d[1]) == 1){ this._V_.loop = true; else{ this._V_.loop = false; break; case 'i': this._V_.poster = d[1]; break; default: break; frontAdPause: function(s) { this.getNot(); frontAdUnload: function() { this.getNot(); changeFace: function(s) { this.getNot(); plugin: function(a, b, c, d, e, f, g) { this.getNot(); videoClear: function() { this.getNot(); videoBrightness: function(s) { this.getNot(); videoContrast: function(s) { this.getNot(); videoSaturation: function(s) { this.getNot(); videoSetHue: function(s) { this.getNot(); videoWAndH: function(a, b) { this.getNot(); videoWHXY: function(a, b, c, d) { this.getNot(); changeFlashvars: function(a) { this.getNot(); changeMyObject: function(a, b) { this.getNot(); getMyObject: function(a, b) { this.getNot(); changeeFace: function() { this.getNot(); changeStyle: function(a, b) { this.getNot(); promptLoad: function() { this.getNot(); promptUnload: function() { this.getNot(); marqueeLoad: function(a,b) { this.getNot(); marqueeClose: function(s) { this.getNot(); getNot: function() { var s='The ckplayer\'s API for HTML5 does not exist'; return s; volumeChangeHandler: function() { var C = CKobject; if (C._V_.muted) { C.returnStatus('volumechange:0', 1); C._O_['volume'] = 0; C._O_['mute'] = true; } else { C._O_['mute'] = false; C._O_['volume'] = C._V_['volume'] * 100; C.returnStatus('volumechange:'+C._V_['volume'] * 100, 1); endedHandler: function() { var C = CKobject; var e=parseInt(C.getVars('e')); C.returnStatus('ended', 1); if(C._I_){ clearInterval(C._I_); C._I_=null; if ( e!= 0 && e !=4 && e !=6) { return; if(e==6){ this.quitFullScreen(); var f='playerstop()'; if (C.getSn('calljs', 2)!='') { f=C.getSn('calljs', 2)+'()'; try { if (typeof(eval(f)) == 'function') { eval(f); return; } catch(e) { try { if (typeof(eval(playerstop)) == 'function') { playerstop(); return; } catch(e) { return; loadedMetadataHandler: function() { var C = CKobject; C.returnStatus('loadedmetadata', 1); C._O_['totaltime'] = C._V_['duration']; C._O_['width'] = C._V_['width']; C._O_['height'] = C._V_['height']; C._O_['awidth'] = C._V_['videoWidth']; C._O_['aheight'] = C._V_['videoHeight']; if (C._V_.defaultMuted) { C.returnStatus('volumechange:0', 1); C._O_['mute'] = true; C._O_['volume'] = 0; } else { C._O_['mute'] = false; C._O_['volume'] = C._V_['volume'] * 100; C.returnStatus('volumechange:'+C._V_['volume'] * 100, 1); if (parseInt(C.getVars('p')) == 1) { C.playHandler(); errorHandler: function() { CKobject.returnStatus('error', 1); playHandler: function() { var C = CKobject; if (C._V_.paused) { C.returnStatus('pause', 1); C.addO('play', false); if(C._I_!=null){ clearInterval(C._I_); C._I_=null; } else { C.returnStatus('play', 1); C.addO('play', true); if (!C._P_) { C.returnStatus('play', 1); C._P_ = true; C._I_ = setInterval(C.playTime, parseInt( C.getSn('setup', 37))); if(!C._G_){ C._G_=true; for(var k in C._A_){ if(k=='g' && C._A_[k]){ var g=parseInt(C._A_[k]); C.videoSeek(g); if(!C._Y_){ C._Y_=true; for(var k in C._A_){ if(k=='j' && C._A_[k]){ var j=parseInt(C._A_[k]); if(j>0){ C._J_=j; else{ C._J_=parseInt(C._O_['totaltime'])+j; html5Click: function(){ var C = CKobject; if(C.getVars('m')!='' && C.getVars('m')!=null){ window.open(C.getVars('m')); returnStatus: function(s, j) { var h = s; if (this._H_ == 3) { h = this._E_['p'] +'->'+ h; if (this._M_ && j < = this ._H_ ) { this._L_(h); addO: function(s, z) { this._O_[s] = z; getStatus: function() { return this._O_; playTime: function() { var C = CKobject; var t = C._V_['currentTime']; C._O_['time'] = t; if(C._J_ > 0 && t>C._J_){ C._J_=0; C.videoSeek(C._O_['totaltime']); C.returnStatus('time:' + t, 1); window.CKobject = CKobject; })();这只是一种方案，如果有更好的方案，可以采用其他方法。
我这里的两个实时流采用nginx流媒体服务器推送的两个实时流的方式（一个普清，一个高清），在命名方式上采用类似增减HD的方式控制，到这里就可以自由控制清晰度了
三、ckPlayer播放器嵌入页面（国产ckpalyer播放器的好处就是文档都是中文的）
1、创建播放器实例
<script type="text/javascript"> //如果你不需要某项设置，可以直接删除，注意var flashvars的最后一个值后面不能有逗号 function loadedHandler(){ if(CKobject.getObjectById('ckplayer_a1').getType()){//说明使用html5播放器 alert('播放器已加载，调用的是HTML5播放模块'); else{ alert('播放器已加载，调用的是Flash播放模块'); var _nn=0; function ckplayer_status(str){ _nn+=1; if(_nn>100){ _nn=0; document.getElementById('statusvalue').value=''; document.getElementById('statusvalue').value=str+'\n'+document.getElementById('statusvalue').value; var flashvars={ f:'http://192.168.30.21/test1HD.video.flv',//视频地址 a:'',//调用时的参数，只有当s>0的时候有效 s:'0',//调用方式，0=普通方法（f=视频地址），1=网址形式,2=xml形式，3=swf形式(s>0时f=网址，配合a来完成对地址的组装) c:'1',//是否读取文本配置,0不是，1是 x:'',//调用配置文件路径，只有在c=1时使用。默认为空调用的是ckplayer.xml i:'',//初始图片地址 d:'',//暂停时播放的广告，swf/图片,多个用竖线隔开，图片要加链接地址，没有的时候留空就行 u:'',//暂停时如果是图片的话，加个链接地址 l:'',//前置广告，swf/图片/视频，多个用竖线隔开，图片和视频要加链接地址 r:'',//前置广告的链接地址，多个用竖线隔开，没有的留空 t:'0|0',//视频开始前播放swf/图片时的时间，多个用竖线隔开 y:'',//这里是使用网址形式调用广告地址时使用，前提是要设置l的值为空 z:'',//缓冲广告，只能放一个，swf格式 e:'2',//视频结束后的动作，0是调用js函数，1是循环播放，2是暂停播放并且不调用广告，3是调用视频推荐列表的插件，4是清除视频流并调用js功能和1差不多，5是暂停播放并且调用暂停广告 v:'80',//默认音量，0-100之间 p:'1',//视频默认0是暂停，1是播放，2是不加载视频 h:'0',//播放http视频流时采用何种拖动方法，=0不使用任意拖动，=1是使用按关键帧，=2是按时间点，=3是自动判断按什么(如果视频格式是.mp4就按关键帧，.flv就按关键时间)，=4也是自动判断(只要包含字符mp4就按mp4来，只要包含字符flv就按flv来) q:'',//视频流拖动时参考函数，默认是start m:'',//让该参数为一个链接地址时，单击播放器将跳转到该地址 o:'',//当p=2时，可以设置视频的时间，单位，秒 w:'',//当p=2时，可以设置视频的总字节数 g:'',//视频直接g秒开始播放 j:'',//跳过片尾功能，j>0则从播放多少时间后跳到结束，<0则总总时间-该值的绝对值时跳到结束 k:'',//提示点时间，如 30|60鼠标经过进度栏30秒，60秒会提示n指定的相应的文字 n:'',//提示点文字，跟k配合使用，如 提示点1|提示点2 wh:'',//宽高比，可以自己定义视频的宽高或宽高比如：wh:'4:3',或wh:'1080:720' lv:'0',//是否是直播流，=1则锁定进度栏 loaded:'loadedHandler',//当播放器加载完成后发送该js函数loaded //调用播放器的所有参数列表结束 //以下为自定义的播放器参数用来在插件里引用的 my_url:encodeURIComponent(window.kk)//本页面地址 //调用自定义播放器参数结束 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//这里定义播放器的其它参数如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互 var video=['http://192.168.30.21/test1HD.video.mp4']; CKobject.embed('ckplayer/ckplayer/ckplayer.swf','player1','ckplayer_1','720px','360px',false,flashvars,video,params); </script>2、删除广告位，关闭右侧栏菜单的配置
2.1、修改ckplayer.js
------------------------------------------------------------------------- 正式使用时可以把该文件的注释全部去掉，节省加载时间 ckplayer6.7,有问题请访问http://www.ckplayer.com 请注意，该文件为UTF-8编码，不需要改变编码即可使用于各种编码形式的网站内 ------------------------------------------------------------------------- 第一部分，加载插件 以下为加载的插件部份 插件的设置参数说明： 1、插件名称 2、水平对齐方式（0左，1中，2右） 3、垂直对齐方式（0上，1中，2下） 4、水平方向位置偏移量 5、垂直方向位置偏移量 6、插件的等级，0=普通图片插件且跟随控制栏隐藏而隐藏，显示而显示，1=普通图片插件且永久显示，2=swf插件，默认显示，3=swf插件，默认隐藏，swf插件都可以交互 7、插件是否绑定在控制栏上，0不绑定，1绑定，当值是1的时候该插件将会随着控制栏一起隐藏或缓动 8、插件为swf并且可交互时，默认调用的类所在的包名称，详细说明可以到帮助手册里查看，默认无 插件名称不能相同，对此的详细说明请到网站查看 function ckcpt() { var cpt = ''; cpt += 'right.swf,2,1,0,0,2,0|'; //右边开关灯，调整，分享按钮的插件 cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件 cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //调整大小和颜色的插件 return cpt; 插件的定义结束 以下是对播放器功能进行配置 function ckstyle() { //定义总的风格 var ck = { cpath: '', 播放器风格压缩包文件的路径，默认的是style.swf 如果调用不出来可以试着设置成绝对路径试试 如果不知道路径并且使用的是默认配置，可以直接留空，播放器会 language: '', /*播放器所使用的语言配置文件，需要和播放器在同目录下，默认是language.xml*/ flashvars: '', 这里是用来做为对flashvars值的补充，除了c和x二个参数以外的设置都可以在这里进行配置 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 3 3 4 4 4 4 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3*/ setup: '1,1,1,1,1,2,0,1,2,0,0,1,200,0,2,1,0,1,1,1,2,10,3,0,1,2,3000,0,0,0,0,1,1,1,1,1,1,250,0,90,0,0,0', 这是配置文件里比较重要的一个参数，共有N个功能控制参数，并且以后会继续的增加，各控制参数以英文逗号(,)隔开。下面列出各参数的说明： 1、鼠标经过按钮是否使用手型，0普通鼠标，1手型鼠标，2是只有按钮手型，3是控制栏手型 2、是否支持单击暂停，0不支持，1是支持 3、是否支持双击全屏，0不支持，1是支持 4、在播放前置广告时是否同时加载视频，0不加载，1加载 5、广告显示的参考对象，0是参考视频区域，1是参考播放器区域 6、广告大小的调整方式,只针对swf和图片有效,视频是自动缩放的 =0是自动调整大小，意思是说大的话就变小，小的话就变大 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟参考对像(第5个控制)参数设置的一样宽高 7、前置广告播放顺序，0是顺序播放，1是随机播放，>1则随机取所有广告中的(N-1)个进行播放 8、对于视频广告是否采用修正，0是不使用，1是使用，如果是1，则用户在网速慢的情况下会按设定的倒计时进行播放广告，计时结束则放正片（比较人性化），设置成0的话，则强制播放完广告才能播放正片 9、是否开启滚动文字广告，0是不开启，1是开启且不使用关闭按钮，2是开启并且使用关闭按钮，开启后将在加载视频的时候加载滚动文字广告 10、视频的调整方式 =0是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟参考对像(pm_video的设置)参数设置的一样宽高 11、是否在多视频时分段加载，0不是，1是 12、缩放视频时是否进行平滑处理，0不是，1是 13、视频缓冲时间,单位：毫秒,建议不超过300 14、初始图片调整方式( =0是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟pm_video参数设置的一样宽高 15、暂停广告调整方式( =0是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟pm_video参数设置的一样宽 16、暂停广告是否使用关闭广告设置，0不使用，1使用 17、缓冲时是否播放广告，0是不显示，1是显示并同时隐藏掉缓冲图标和进度，2是显示并不隐藏缓冲图标 18、是否支持键盘空格键控制播放和暂停0不支持，1支持 19、是否支持键盘左右方向键控制快进快退0不支持，1支持 20、是否支持键盘上下方向键控制音量0不支持，1支持 21、播放器返回js交互函数的等级，0-2,等级越高，返回的参数越多 0是返回少量常用交互 1返回播放器在播放的时候的参数，不返回广告之类的参数 2返回全部参数 3返回全部参数，并且在参数前加上"播放器ID->"，用于多播放器的监听 22、快进和快退的秒数 23、界面上图片元素加载失败重新加载次数 24、开启加载皮肤压缩文件包的加载进度提示 25、使用隐藏控制栏时显示简单进度条的功能,0是不使用，1是使用，2是只在普通状态下使用 26、控制栏隐藏设置(0不隐藏，1全屏时隐藏，2都隐藏 27、控制栏隐藏延时时间，即在鼠标离开控制栏后多少毫秒后隐藏控制栏 28、左右滚动时是否采用无缝，默认0采用，1是不采用 29、0是正常状态，1是控制栏默认隐藏，播放状态下鼠标经过播放器显示控制栏，2是一直隐藏控制栏 30、在播放rtmp视频时暂停后点击播放是否采用重新链接的方式,这里一共分0-2三个等级 31、当采用网址形式(flashvars里s=1/2时)读取视频地址时是采用默认0=get方法，1=post方式 32、是否启用播放按钮和暂停按钮 33、是否启用中间暂停按钮 34、是否启用静音按钮 35、是否启用全屏按钮 36、是否启用进度调节栏,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动， 37、是否启用调节音量 38、计算时间的间隔，毫秒 39、前置logo至少显示的时间，单位：毫秒 40、前置视频广告的默认音量 41、当s=3/4时加载插件是否从压缩包里加载，0不是，1是 42、加载风格是否采用加密方式传送，该功能普通用户不能使用 43、在s=1/2时，调用地址里的地址是否是相对地址（相对于调用文件），0不是，1是 pm_bg: '0x000000,100,230,180', /*播放器整体的背景配置，请注意，这里只是一个初始化的设置，如果需要真正的改动播放器的背景和最小宽高，需要在风格文件里找到相同的参数进行更改。 1、整体背景颜色 2、背景透明度 3、播放器最小宽度 4、播放器最小高度 这里只是初始化时的设置，最终加载完播放器后显示的效果需要在style.swf/style.xml里设置该参数 mylogo: 'logo.swf', 视频加载前显示的logo文件，不使用设置成null，即mylogo='null'; pm_mylogo: '1,1,-100,-55', 视频加载前显示的logo文件(mylogo参数的)的位置 本软件所有的四个参数控制位置的方式全部都是统一的意思，如下 1、水平对齐方式，0是左，1是中，2是右 2、垂直对齐方式，0是上，1是中，2是下 3、水平偏移量，举例说明，如果第1个参数设置成0左对齐，第3个偏移量设置成10，就是离左边10个像素，第一个参数设置成2，偏移量如果设置的是正值就会移到播放器外面，只有设置成负值才行，设置成-1，按钮就会跑到播放器外面 4、垂直偏移量 logo: 'cklogo.png', 默认右上角一直显示的logo，不使用设置成null，即logo='null'; pm_logo: '2,0,-100,20', 播放器右上角的logo的位置 1、水平对齐方式，0是左，1是中，2是右 2、垂直对齐方式，0是上，1是中，2是下 3、水平偏移量 4、垂直偏移量 以下是播放器自带的二个插件 control_rel: 'related.swf,ckplayer/related.xml,0', 视频结束显示精彩视频的插件 1、视频播放结束后显示相关精彩视频的插件文件（注意，视频结束动作设置成3时(即var flashvars={e:3})有效）， 2、xml文件是调用精彩视频的示例文件，可以自定义文件类型（比如asp,php,jsp,.net只要输出的是xml格式就行）,实际使用中一定要注意第二个参数的路径要正确 3、第三个参数是设置配置文件的编码，0是默认的utf-8,1是gbk2312 control_pv: 'Preview.swf,105,2000', 视频预览插件 1、插件文件名称(该插件和上面的精彩视频的插件都是放在风格压缩包里的) 2、离进度栏的高(指的是插件的顶部离进度栏的位置) 3、延迟时间(该处设置鼠标经过进度栏停顿多少毫秒后才显示插件) 建议一定要设置延时时间，不然当鼠标在进度栏上划过的时候就会读取视频地址进行预览，很占资源 pm_repc: '', 视频地址替换符，该功能主要是用来做简单加密的功能，使用方法很简单，请注意，只针对f值是视频地址的时候有效，其它地方不能使用。具体的请查看http://www.ckplayer.com/manual.php?id=4#title_25 pm_spac: '|', 视频地址间隔符，这里主要是播放多段视频时使用普通调用方式或网址调用方式时使用的。默认使用|，如果视频地址里本身存在|的话需要另外设置一个间隔符，注意，即使只有一个视频也需要设置。另外在使用rtmp协议播放视频的时候，如果视频存在多级目录的话，这里要改成其它的符号，因为rtmp协议的视频地址多级的话也需要用到|隔开流地址和实例地址 pm_fpac: 'file->f', 该参数的功能是把自定义的flashvars里的变量替换成ckplayer里对应的变量，默认的参数的意思是把flashvars里的file值替换成f值，因为ckplayer里只认f值，多个替换之间用竖线隔开 pm_advtime: '2,0,-110,10,0,300,0', 前置广告倒计时文本位置，播放前置 广告时有个倒计时的显示文本框，这里是设置该文本框的位置和宽高，对齐方式的。一共7个参数，分别表示： 1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐 2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐 3、水平位置偏移量 4、垂直位置偏移量 5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐 6、文本框宽席 7、文本框高度 pm_advstatus: '1,2,2,-200,-40', 前置广告静音按钮，静音按钮只在是视频广告时显示，当然也可以控制不显示 1、是否显示0不显示，1显示 2、水平对齐方式 3、垂直对齐方式 4、水平偏移量 5、垂直偏移量 pm_advjp: '1,1,2,2,-100,-40', 前置广告跳过广告按钮的位置 1、是否显示0不显示，1是显示 2、跳过按钮触发对象(值0/1,0是直接跳转,1是触发js:function ckadjump(){}) 3、水平对齐方式 4、垂直对齐方式 5、水平偏移量 6、垂直偏移量 pm_padvc: '2,0,-10,-10', 暂停广告的关闭按钮的位置 1、水平对齐方式 2、垂直对齐方式 3、水平偏移量 4、垂直偏移量 pm_advms: '2,2,-46,-56', 滚动广告关闭按钮位置 1、水平对齐方式 2、垂直对齐方式 3、水平偏移量 4、垂直偏移量 pm_zip: '1,1,-20,-8,1,0,0', 加载皮肤压缩包时提示文字的位置 1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐 2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐 3、水平位置偏移量 4、垂直位置偏移量 5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐 6、文本框宽席 7、文本框高度 //pm_advmarquee: '1,2,50,-60,50,18,0,0x000000,50,0,20,1,15,2000', pm_advmarquee: '1,2,50,-60,50,20,0,0x000000,50,0,20,1,30,2000', 滚动广告的控制，要使用的话需要在setup里的第9个参数设置成1 这里分二种情况,前六个参数是定位控制，第7个参数是设置定位方式(0：相对定位，1：绝对定位) 第一种情况：第7个参数是0的时候，相对定位，就是播放器长宽变化的时候，控制栏也跟着变 1、默认1:中间对齐 2、上中下对齐（0是上，1是中，2是下） 3、离左边的距离 4、Y轴偏移量 5、离右边的距离 7、定位方式 第二种情况：第7个参数是1的时候，绝对定位，就是播放器长宽变化的时候，控制栏不跟着变，这种方式一般使用在控制栏大小不变的时候 1、左中右对齐方式（0是左，1是中间，2是右） 2、上中下对齐（0是上，1是中，2是下） 3、x偏移量 4、y偏移量 7、定位方式 以上是前7个参数的作用 8、是文字广告的背景色 9、置背景色的透明度 10、控制滚动方向，0是水平滚动（包括左右），1是上下滚动（包括向上和向下） 11、移动的单位时长，即移动单位像素所需要的时长，毫秒 12、移动的单位像素,正数同左/上，负数向右/下 13、是行高，这个在设置向上或向下滚动的时候有用处 14、控制向上或向下滚动时每次停止的时间 pm_glowfilter:'1,0x01485d, 100, 6, 3, 10, 1, 0, 0', /*滚动文字广告是否采用发光滤镜 1、是否使用发光滤镜，0是不采用，1是使用 2、(default = 0xFF0000) — 光晕颜色，采用十六进制格式 0xRRGGBB。 默认值为 0xFF0000 3、(default = 100) — 颜色的 Alpha 透明度值。 有效值为 0 到 100。 例如，25 设置透明度为 25% 4、(default = 6.0) — 水平模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快 5、(default = 6.0) — 垂直模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快 6、(default = 2) — 印记或跨页的强度。 该值越高，压印的颜色越深，而且发光与背景之间的对比度也越强。 有效值为 0 到 255 7、(default = 1) — 应用滤镜的次数 8、(default = 0) — 指定发光是否为内侧发光。 值 1 指定发光是内侧发光。 值 0 指定发光是外侧发光（对象外缘周围的发光） 9、(default = 0) — 指定对象是否具有挖空效果。 值为 1 将使对象的填充变为透明，并显示文档的背景颜色 advmarquee: escape('{a href="http://www.ckplayer.com"}{font color="#FFFFFF" size="12"}这里可以放文字广告，播放器默认使用这里设置的广告内容，如果不想在这里使用可以清空这里的内容，如果想在页面中实时定义滚动文字广告内容，可以清空这里的内容，然后在页面中设置广告函数。{/font}{/a}'), 该处是滚动文字广告的内容，如果不想在这里设置，就把这里清空并且在页面中使用js的函数定义function ckmarqueeadv(){return '广告内容'} mainfuntion:'', 当flashvars里s=3/4时，调用的函数包名称，默认为空，调用时间轴上的函数setAppObj flashplayer:'', 当flashvars里的s=3/4时，也可以把swf文件放在这里 calljs:'ckplayer_status,ckadjump,playerstop,ckmarqueeadv', 跳过广告和播放结束时调用的js函数 myweb: escape(''), ------------------------------------------------------------------------------------------------------------------ 以下内容部份是和插件相关的配置，请注意，自定义插件以及其配置的命名方式要注意，不要和系统的相重复，不然就会替换掉系统的相关设置，删除相关插件的话也可以同时删除相关的配置 ------------------------------------------------------------------------------------------------------------------ 以下内容定义自定义插件的相关配置，这里也可以自定义任何自己的插件需要配置的内容，当然，如果你某个插件不使用的话，也可以删除相关的配置 ------------------------------------------------------------------------------------------------------------------ cpt_lights: '1', 该处定义是否使用开关灯，和right.swf插件配合作用,使用开灯效果时调用页面的js函数function closelights(){}; cpt_share: 'ckplayer/share.xml', 分享插件调用的配置文件地址 调用插件开始 cpt_list: ckcpt() ckcpt()是本文件最上方的定义插件的函数 return ck; html5部分开始 以下代码是支持html5的，如果你不需要，可以删除。 html5代码块的代码可以随意更改以适合你的应用，欢迎到论坛交流更改心得
2.2、修改ckplayer.xml
<?xml version="1.0" encoding="utf-8"?> <ckplayer> <style> <cpath></cpath> 播放器风格压缩包文件的路径，默认的是style.swf 如果调用不出来可以试着设置成绝对路径试试 如果不知道路径并且使用的是默认配置，可以直接留空，播放器会自动寻找 <language></language> 播放器所使用的语言配置文件，需要和播放器在同目录下，默认是language.xml <flashvars>{b->1}{p->1}</flashvars> 这里是用来做为对flashvars值的补充，除了c和x二个参数以外的设置都可以在这里进行配置 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 3 3 4 4 4 4 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 <setup>1,1,1,1,1,2,0,1,2,0,0,1,200,0,2,1,0,1,1,1,0,10,3,0,1,2,3000,0,0,0,0,1,1,1,1,1,1,250,0,90,0,0,0</setup> 这是配置文件里比较重要的一个参数，共有N个功能控制参数，并且以后会继续的增加，各控制参数以英文逗号(,)隔开。下面列出各参数的说明： 1、鼠标经过按钮是否使用手型，0普通鼠标，1手型鼠标，2是只有按钮手型，3是控制栏手型 2、是否支持单击暂停，0不支持，1是支持 3、是否支持双击全屏，0不支持，1是支持 4、在播放前置广告时是否同时加载视频，0不加载，1加载 5、广告显示的参考对象，0是参考视频区域，1是参考播放器区域 6、广告大小的调整方式,只针对swf和图片有效,视频是自动缩放的 =0是自动调整大小，意思是说大的话就变小，小的话就变大 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟参考对像(第5个控制)参数设置的一样宽高 7、前置广告播放顺序，0是顺序播放，1是随机播放，>1则随机取所有广告中的(N-1)个进行播放 8、对于视频广告是否采用修正，0是不使用，1是使用，如果是1，则用户在网速慢的情况下会按设定的倒计时进行播放广告，计时结束则放正片（比较人性化），设置成0的话，则强制播放完广告才能播放正片 9、是否开启滚动文字广告，0是不开启，1是开启且不使用关闭按钮，2是开启并且使用关闭按钮，开启后将在加载视频的时候加载滚动文字广告 10、视频的调整方式 =0是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟参考对像(pm_video的设置)参数设置的一样宽高 11、是否在多视频时分段加载，0不是，1是 12、缩放视频时是否进行平滑处理，0不是，1是 13、视频缓冲时间,单位：毫秒,建议不超过300 14、初始图片调整方式( =0是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟pm_video参数设置的一样宽高 15、暂停广告调整方式( =0是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变 =1是大的化变小，小的话不变 =2是什么也不变，就这么大 =3是跟pm_video参数设置的一样宽 16、暂停广告是否使用关闭广告设置，0不使用，1使用 17、缓冲时是否播放广告，0是不显示，1是显示并同时隐藏掉缓冲图标和进度，2是显示并不隐藏缓冲图标 18、是否支持键盘空格键控制播放和暂停0不支持，1支持 19、是否支持键盘左右方向键控制快进快退0不支持，1支持 20、是否支持键盘上下方向键控制音量0不支持，1支持 21、播放器返回js交互函数的等级，0-2,等级越高，返回的参数越多 0是返回少量常用交互 1返回播放器在播放的时候的参数，不返回广告之类的参数 2返回全部参数 3返回全部参数，并且在参数前加上"播放器ID->"，用于多播放器的监听 22、快进和快退的秒数 23、界面上图片元素加载失败重新加载次数 24、开启加载皮肤压缩文件包的加载进度提示 25、使用隐藏控制栏时显示简单进度条的功能,0是不使用，1是使用，2是只在普通状态下使用 26、控制栏隐藏设置(0不隐藏，1全屏时隐藏，2都隐藏 27、控制栏隐藏延时时间，即在鼠标离开控制栏后多少毫秒后隐藏控制栏 28、左右滚动时是否采用无缝，默认0采用，1是不采用 29、0是正常状态，1是控制栏默认隐藏，播放状态下鼠标经过播放器显示控制栏，2是一直隐藏控制栏 30、在播放rtmp视频时暂停后点击播放是否采用重新链接的方式,这里一共分0-3四个等级 31、当采用网址形式(flashvars里s=1/2时)读取视频地址时是采用默认0=get方法，1=post方式 32、是否启用播放按钮和暂停按钮 33、是否启用中间暂停按钮 34、是否启用静音按钮 35、是否启用全屏按钮 36、是否启用进度调节栏,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动， 37、是否启用调节音量 38、计算时间的间隔，毫秒 39、前置logo至少显示的时间，单位：毫秒 40、前置视频广告的默认音量 41、当s=3/4时加载插件是否从压缩包里加载，0不是，1是 42、加载风格是否采用加密方式传送，该功能普通用户不能使用 43、在s=1/2时，调用地址里的地址是否是相对地址（相对于调用文件），0不是，1是 <pm_bg>0x000000,100,230,180</pm_bg> <!--播放器整体的背景配置 1、整体背景颜色 2、背景透明度 3、播放器最小宽度 4、播放器最小高度 这里只是初始化时的设置，最终加载完播放器后显示的效果需要在style.swf/style.xml里设置该参数 <mylogo>null</mylogo> 视频加载前显示的logo文件，不使用设置成<mylogo>null</mylogo> <pm_mylogo>1,1,-100,-55</pm_mylogo> 视频加载前显示的logo文件(mylogo参数的)的位置 本软件所有的四个参数控制位置的方式全部都是统一的意思，如下 1、水平对齐方式，0是左，1是中，2是右 2、垂直对齐方式，0是上，1是中，2是下 3、水平偏移量，举例说明，如果第1个参数设置成0左对齐，第3个偏移量设置成10，就是离左边10个像素，第一个参数设置成2，偏移量如果设置的是正值就会移到播放器外面，只有设置成负值才行，设置成-1，按钮就会跑到播放器外面 4、垂直偏移量 <logo>null</logo> 默认右上角一直显示的logo，不使用设置成<logo>null</logo> <pm_logo>2,0,-100,20</pm_logo> 播放器右上角的logo的位置 1、水平对齐方式，0是左，1是中，2是右 2、垂直对齐方式，0是上，1是中，2是下 3、水平偏移量 4、垂直偏移量 以下是播放器自带的二个插件 <control_rel>related.swf,related.xml,0</control_rel> 1、视频播放结束后显示相关精彩视频的插件文件（注意，视频结束动作设置成3时(即var flashvars={e:3})有效）， 2、xml文件是调用精彩视频的示例文件，可以自定义文件类型（比如asp,php,jsp,.net只要输出的是xml格式就行）,实际使用中一定要注意第二个参数的路径要正确 3、第三个参数是设置配置文件的编码，0是默认的utf-8,1是gbk2312 <control_pv>Preview.swf,105,2000</control_pv> 视频预览插件 1、插件文件名称(该插件和上面的精彩视频的插件都是放在风格压缩包里的) 2、离进度栏的高(指的是插件的顶部离进度栏的位置) 3、延迟时间(该处设置鼠标经过进度栏停顿多少毫秒后才显示插件) 建议一定要设置延时时间，不然当鼠标在进度栏上划过的时候就会读取视频地址进行预览，很占资源 <pm_repc></pm_repc> 视频地址替换符，该功能主要是用来做简单加密的功能，使用方法很简单，请注意，只针对f值是视频地址的时候有效，其它地方不能使用。具体的请查看http://www.ckplayer.com/manual.php?id=4#title_25 <pm_spac>|</pm_spac> 视频地址间隔符，这里主要是播放多段视频时使用普通调用方式或网址调用方式时使用的。默认使用|，如果视频地址里本身存在|的话需要另外设置一个间隔符，注意，即使只有一个视频也需要设置。另外在使用rtmp协议播放视频的时候，如果视频存在多级目录的话，这里要改成其它的符号，因为rtmp协议的视频地址多级的话也需要用到|隔开流地址和实例地址 <pm_fpac>file->f</pm_fpac> 该参数的功能是把自定义的flashvars里的变量替换成ckplayer里对应的变量，默认的参数的意思是把flashvars里的file值替换成f值，因为ckplayer里只认f值，多个替换之间用竖线隔开 <pm_advtime>2,0,-110,10,0,300,0</pm_advtime> 前置广告倒计时文本位置，播放前置 广告时有个倒计时的显示文本框，这里是设置该文本框的位置和宽高，对齐方式的。一共7个参数，分别表示： 1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐 2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐 3、水平位置偏移量 4、垂直位置偏移量 5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐 6、文本框宽席 7、文本框高度 <pm_advstatus>1,2,2,-200,-40</pm_advstatus> 前置广告静音按钮，静音按钮只在是视频广告时显示，当然也可以控制不显示 1、是否显示0不显示，1显示 2、水平对齐方式 3、垂直对齐方式 4、水平偏移量 5、垂直偏移量 <pm_advjp>0,0,2,2,-100,-40</pm_advjp> 前置广告跳过广告按钮的位置 1、是否显示0不显示，1是显示 2、跳过按钮触发对象(值0/1,0是直接跳转,1是触发js:function ckadjump(){}) 3、水平对齐方式 4、垂直对齐方式 5、水平偏移量 6、垂直偏移量 <pm_padvc>2,0,-10,-10</pm_padvc> 暂停广告的关闭按钮的位置 1、水平对齐方式 2、垂直对齐方式 3、水平偏移量 4、垂直偏移量 <pm_advms>2,2,-46,-56</pm_advms> 滚动广告关闭按钮位置 1、水平对齐方式 2、垂直对齐方式 3、水平偏移量 4、垂直偏移量 <pm_zip>1,1,-20,-8,1,0,0</pm_zip> 加载皮肤压缩包时提示文字的位置 1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐 2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐 3、水平位置偏移量 4、垂直位置偏移量 5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐 6、文本框宽席 7、文本框高度 <pm_advmarquee>1,2,50,-60,50,18,0,0x000000,50,0,20,1,30,2000</pm_advmarquee> 滚动广告的控制，要使用的话需要在setup里的第9个参数设置成1 这里分二种情况,前六个参数是定位控制，第7个参数是设置定位方式(0：相对定位，1：绝对定位) 第一种情况：第7个参数是0的时候，相对定位，就是播放器长宽变化的时候，控制栏也跟着变 1、默认1:中间对齐 2、上中下对齐（0是上，1是中，2是下） 3、离左边的距离 4、Y轴偏移量 5、离右边的距离 7、定位方式 第二种情况：第7个参数是1的时候，绝对定位，就是播放器长宽变化的时候，控制栏不跟着变，这种方式一般使用在控制栏大小不变的时候 1、左中右对齐方式（0是左，1是中间，2是右） 2、上中下对齐（0是上，1是中，2是下） 3、x偏移量 4、y偏移量 7、定位方式 以上是前7个参数的作用 8、是文字广告的背景色 9、置背景色的透明度 10、控制滚动方向，0是水平滚动（包括左右），1是上下滚动（包括向上和向下） 11、移动的单位时长，即移动单位像素所需要的时长，毫秒 12、移动的单位像素,正数同左/上，负数向右/下 13、是行高，这个在设置向上或向下滚动的时候有用处 14、控制向上或向下滚动时每次停止的时间 <pm_glowfilter>0,0x01485d, 100, 6, 3, 10, 1, 0, 0</pm_glowfilter> <!--滚动文字广告是否采用发光滤镜 1、是否使用发光滤镜，0是不采用，1是使用 2、(default = 0xFF0000) — 光晕颜色，采用十六进制格式 0xRRGGBB。 默认值为 0xFF0000 3、(default = 100) — 颜色的 Alpha 透明度值。 有效值为 0 到 100。 例如，25 设置透明度为 25% 4、(default = 6.0) — 水平模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快 5、(default = 6.0) — 垂直模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快 6、(default = 2) — 印记或跨页的强度。 该值越高，压印的颜色越深，而且发光与背景之间的对比度也越强。 有效值为 0 到 255 7、(default = 1) — 应用滤镜的次数 8、(default = 0) — 指定发光是否为内侧发光。 值 1 指定发光是内侧发光。 值 0 指定发光是外侧发光（对象外缘周围的发光） 9、(default = 0) — 指定对象是否具有挖空效果。 值为 1 将使对象的填充变为透明，并显示文档的背景颜色背景颜色。 <advmarquee></advmarquee> 该处是滚动文字广告的内容，如果不想在这里设置，就把这里清空并且在页面中使用js的函数定义function ckmarqueeadv(){return '广告内容'} <mainfuntion></mainfuntion> 当flashvars里s=3/4时，调用的函数包名称，默认为空，调用时间轴上的函数setAppObj <flashplayer></flashplayer> 当flashvars里的s=3/4时，也可以把swf文件放在这里 <calljs>ckplayer_status,ckadjump,playerstop,ckmarqueeadv</calljs> 跳过广告和播放结束时调用的js函数 <myweb></myweb> 以下内容部份是和插件相关的配置，请注意，自定义插件以及其配置的命名方式要注意，不要和系统的相重复，不然就会替换掉系统的相关设置，删除相关插件的话也可以同时删除相关的配置 以下内容定义自定义插件的相关配置，这里也可以自定义任何自己的插件需要配置的内容，当然，如果你某个插件不使用的话，也可以删除相关的配置 <cpt_lights>0</cpt_lights> 该处定义是否使用开关灯，和right.swf插件配合作用,使用开灯效果时调用页面的js函数function closelights(){}; <!--<cpt_share>ckplayer/ckplayer/share.xml</cpt_share>--> 分享插件调用的配置文件地址 调用插件开始 <!--<cpt>right.swf,2,1,0,0,2,0</cpt>右边开关灯，调整，分享按钮的插件--> <!--<cpt>share.swf,1,1,-180,-100,3,0</cpt>分享插件--> <!--<cpt>adjustment.swf,1,1,-180,-100,3,0</cpt>调整大小和颜色的插件--> </style> </ckplayer>
3、常用API
function videoLoadJs(s){ alert("执行了播放"); function playerstop(){ //只有当调用视频播放器时设置e=0或4时会有效果 alert('播放完成'); var _nn=0;//用来计算实时监听的条数的，超过100条记录就要删除，不然会消耗内存 function getstart(){ var a=CKobject.getObjectById('ckplayer_1').getStatus(); var ss=''; for (var k in a){ ss+=k+":"+a[k]+'\n'; alert(ss); function changePrompt(){ CKobject.getObjectById('ckplayer_1').promptUnload();//卸载掉目前的 CKobject.getObjectById('ckplayer_1').changeFlashvars('{k->10|20|30}{n->重设提示点一|重设提示点二|重设提示点三}'); CKobject.getObjectById('ckplayer_1').promptLoad();//重新加载 function addflash(){ if(CKobject.Flash()['f']){ CKobject._K_('player1').innerHTML=''; CKobject.embedSWF('ckplayer/ckplayer/ckplayer.swf','player1','ckplayer_1','600','400',flashvars,params); else{ alert('该环境中没有安装flash插件，无法切换'); function addhtml5(){ if(CKobject.isHTML5()){ support=['all']; CKobject._K_('player1').innerHTML=''; CKobject.embedHTML5('player1','ckplayer_1',600,400,video,flashvars,support); else{ alert('该环境不支持html5，无法切换'); function addListener(){ if(CKobject.getObjectById('ckplayer_1').getType()){//说明使用html5播放器 CKobject.getObjectById('ckplayer_1').addListener('play',playHandler); else{ CKobject.getObjectById('ckplayer_1').addListener('play','playHandler'); function playHandler(){ alert('因为注册了监听播放，所以弹出此内容，删除监听将不再弹出'); function removeListener(){//删除监听事件 if(CKobject.getObjectById('ckplayer_1').getType()){//说明使用html5播放器 CKobject.getObjectById('ckplayer_1').removeListener('play',playHandler); else{ CKobject.getObjectById('ckplayer_1').removeListener('play','playHandler'); </script> <input type="button" name="button23" value="切换到flash播放器" onClick="addflash();" /> <input type="button" name="button24" value="切换到html5播放器" onClick="addhtml5();" /> <p>以下的操作对flash播放器和html5播放器都有效</p> <input type="button" name="button5" value="播放" onClick="CKobject.getObjectById('ckplayer_1').videoPlay();" /> <input type="button" name="button6" value="暂停" onClick="CKobject.getObjectById('ckplayer_1').videoPause();" /> <input type="button" name="button7" value="播放/暂停" onClick="CKobject.getObjectById('ckplayer_a1').playOrPause();" /> <input type="button" name="button8" value="快进" onClick="CKobject.getObjectById('ckplayer_1').fastNext();" /> <input type="button" name="button9" value="快退" onClick="CKobject.getObjectById('ckplayer_1').fastBack();" /> <input type="button" name="button15" value="暂停监听" onClick="CKobject.getObjectById('ckplayer_1').changeStatus(0);" /> <input type="button" name="button16" value="加ID的监听" onClick="CKobject.getObjectById('ckplayer_1').changeStatus(3);" /> <input type="button" name="button21" value="获取播放器当前相关属性" onClick="getstart();" /> <input type="button" name="button13" value="注册监听播放事件" onClick="addListener();" /> <input type="button" name="button14" value="删除监听播放事件" onClick="removeListener();" /> 播放新参数地址： <input name="newaddress" type="text" id="newaddress" value="" size="60" maxlength="300" /> <input type="button" name="button" id="button" value="跳转" onClick="CKobject.getObjectById('ckplayer_1').newAddress(document.getElementById('newaddress').value);" /><br> <p id="aboutme"></p> <script type="text/javascript"> var aboutme=''; aboutme+='平台(浏览器)内核：'+CKobject.Platform()+'<br />'; aboutme+='浏览器：'+CKobject.browser()['B']+'<br />'; aboutme+='浏览器版本：'+CKobject.browser()['V']+'<br />'; aboutme+='是否安装了flash插件：'+CKobject.Flash()['f']+'<br />'; if(CKobject.Flash()['f']){ aboutme+='flash插件版本：'+CKobject.Flash()['v']+'<br />'; aboutme+='是否支持HTML5：'+CKobject.isHTML5()+'<br />'; CKobject._K_('aboutme').innerHTML=aboutme;
推荐文章
|
|
傲视众生的小狗 · JS多图预览、删除、上传（详细） - 简书 1 年前 |