搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...
前面几章讲解了使用
nginx-rtmp搭建直播流媒体服务器;
ffmpeg推流到nginx-rtmp服务器;
java通过命令行调用ffmpeg实现推流服务;
从数据源获取,到使用ffmpeg推流,再到nginx-rtmp发布流,后端的服务到这里就已经全部完成了。
如果这里的流程没走通,那么这里的播放器也是没办法播放实时流的。
本章讲一下播放器的选用和二次开发,前端的播放器虽然有flex(flash)可以用,但是很遗憾flex接触的并不多,学习成本又太高,那么基于第三方开源的flash播放器二次开发就显得很有必要。
一、几种播放器选择
那么播放器,已经不再更新的以及收费的,这里不会进行介绍,只介绍两种轻量级的开源播放器。
1、videoJS
对于HTML5支持非常棒,可以自动在flash和html5播放器之间进行切换,videoJS可以兼容到IE8,它提供的界面非常简洁,需要对界面进行二次开发。
点击下载videojs开发包
2、ckPlayer
这个播放器是国产播放器,功能有很多,只简单介绍两个功能,(1)提供手动切换html5和flash功能(2)提供了关灯开灯功能。完全可以满足国内开发的需求(3)它内置了大量的广告位,比如片头广告,暂停广告,片尾广告,缓冲广告,切点广告,滚动文字广告,以及满足权限关闭广告的功能....秒懂国内看视频就是广告比较多。
点击下载ckplayer开发包
二、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获取DOMfunction get(index) {return document.getElementById(index);}//修改播放地址并播放function writeAddressAndPlay(index,url,type) {//播放器操作setsrc(index, url, type?type:"rtmp/flv");play(index);}//高清标清切换就是应用名加减HDfunction changeUrl(video) {var index = $(video).text();//获取当前播放的urlvar 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);}
这只是一种方案,如果有更好的方案,可以采用其他方法。
我这里的两个实时流采用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.xmli:'',//初始图片地址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:'',//视频流拖动时参考函数,默认是startm:'',//让该参数为一个链接地址时,单击播放器将跳转到该地址o:'',//当p=2时,可以设置视频的时间,单位,秒w:'',//当p=2时,可以设置视频的总字节数g:'',//视频直接g秒开始播放j:'',//跳过片尾功能,j>0则从播放多少时间后跳到结束,<0则总总时间-该值的绝对值时跳到结束k:'',//提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字n:'',//提示点文字,跟k配合使用,如 提示点1|提示点2wh:'',//宽高比,可以自己定义视频的宽高或宽高比如:wh:'4:3',或wh:'1080:720'lv:'0',//是否是直播流,=1则锁定进度栏loaded:'loadedHandler',//当播放器加载完成后发送该js函数loaded//调用播放器的所有参数列表结束//以下为自定义的播放器参数用来在插件里引用的my_url:encodeURIComponent(window.location.href)//本页面地址//调用自定义播放器参数结束};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 41 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、视频缓冲时间,单位:毫秒,建议不超过30014、初始图片调整方式(=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、离右边的距离6、高度7、定位方式第二种情况:第7个参数是1的时候,绝对定位,就是播放器长宽变化的时候,控制栏不跟着变,这种方式一般使用在控制栏大小不变的时候1、左中右对齐方式(0是左,1是中间,2是右)2、上中下对齐(0是上,1是中,2是下)3、x偏移量4、y偏移量5、宽度6、高度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代码块的代码可以随意更改以适合你的应用,欢迎到论坛交流更改心得
*/
(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.location.href).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];i++;}}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,v: v};},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) {try{o.addEventListener(e, f, false);}catch (e) {this.getNot();}}else if (o.attachEvent) {try{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) {try{o.removeEventListener(e, f, false);}catch(e){this.getNot();}}else if (o.detachEvent) {try{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,v: v};},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;
})();
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 41 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、视频缓冲时间,单位:毫秒,建议不超过30014、初始图片调整方式(=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、离右边的距离6、高度7、定位方式第二种情况:第7个参数是1的时候,绝对定位,就是播放器长宽变化的时候,控制栏不跟着变,这种方式一般使用在控制栏大小不变的时候1、左中右对齐方式(0是左,1是中间,2是右)2、上中下对齐(0是上,1是中,2是下)3、x偏移量4、y偏移量5、宽度6、高度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>
<p>以下的操作对flash播放器和html5播放器都有效</p>
<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();" />
</p>
<p>播放新参数地址:<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>
<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;
转载于:https://www.cnblogs.com/eguid/p/6821607.html
搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...相关推荐
- SkeyeWebPlayer免费网页RTSP/RTMP/FLV/HLS/H265/M3U8直播点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器 SkeyeWebPlayer,使用简单,功能强大, 终身免费使用,支持Windows. Android.iOS平台. SkeyeWebPlayer.js H5播放器是由成都 ...
- EasyPlayer.js开发Web H5网页播放H.265视频播放支持FLV与HLS直播与点播的过程
开发背景 在2019年之前,一直的理解就是H.265是无法在网页上进行解码播放的,直到我看到了金山云.阿里云的技术在LVS流媒体社区推送的关于wasm(WebAssembly)解码播放H.265视频的 ...
- iOS流媒体开发之三:HLS直播(M3U8)回看和下载功能的实现
1.概要 流媒体开发第一篇文章就说要把这些不是随便就可以百度到的知识献给"简书",拖了一个多月了,总算弄完了,深深松了口气,万幸没有食言,否则对不起小伙伴们. 流媒体始终是大众生活 ...
- 基于kurento-one2many二次开发实现多房间直播+共享桌面+切换摄像头+聊天互动
基于kurento-one2many二次开发实现多房间直播+共享桌面+切换摄像头+聊天互动 一.安装coturn穿透服务器 二.安装kurento-Media-Server(KMS)流媒体服务器 三. ...
- 搭建webassembly网页播放器(二)---emcc环境搭建
emcc全称 emscripten,最重要的功能就是让网页js调用c/c++ 成为可能,是我们基于webassembly搭建网页播放器必须依赖的编译工具. emcc官网的搭建教程较为简单,安装过程中最 ...
- 手把手教你做音乐播放器(四)播放服务的搭建
第4节 播放服务的搭建 播放音乐的服务-MusicService是整改音乐播放器的核心,它将播放界面和实际的播放功能连接在一起. 4.1 MusicService的接口 它对外要提供两类主要的功能,播 ...
- 万能播放器 PotPlayer 的下载与安装,直播流 m3u8 导入
一.工具介绍 1.1.PotPlayer是一款来自韩国的全能音视频播放器,它兼容了世界上所有主流音视频文件(换句话,没有它播放不了的视频或音频文件),如:AVI.MPEG.TS.MKV.MP4.WEB ...
- 8K播放网络全终端播放器H5播放器网页直播/点播播放器EasyPlayer和vlc播放RTSP流地址不兼容问题排查解决
背景介绍 EasyPlayer实现了对遵循标准流媒体码流协议进行实时播放以及码流录制,在流的播放速度以及画质的解码显示上均做了大量深度的优化.支持Windows(支持多窗口.包含ActiveX,npA ...
- (0076)iOS开发之UIWebView嵌套直播平台(不涉及播放器技术的开发)
UIWebView嵌套直播平台 需求: 已成型的APP中,网页嵌套直播室,能互动,点赞,甚至可以打赏.不要求实现很强大的直播/播放技术.只需要我们自己人在第三方直播上开个直播室,听众收看制定的直播即可 ...
最新文章
- 一个虚拟键盘的简单思路
- redhat Enterprise 5下安装中文输入法,
- 《SAS编程与数据挖掘商业案例》学习笔记之三
- Codeforces 671C Ultimate Weirdness of an Array 线段树 (看题解)
- WWDC 2018: Shortcuts 快速入门
- grunt集成自动启动
- 解决redis-cli command not found问题
- 马斯克“够狂”!发布“全世界最好的芯片”、推出自动驾驶Taxi,特斯拉鸣锣新战场...
- IntelliJ IDEA 14 license key gen
- centos7 yum安装mysql后启动不起来问题
- aiohttp 高并发web服务_面试官要是问你如何解决web高并发,你就这样回答
- HashMap源码注释
- 为何3Dmax渲染的图偏暗?跟伽马有影响吗?
- QT installs的使用,拷贝文件
- github上如何下载单个文件
- Python 圆拟合
- 密码学常用英文单词翻译
- win7原版安装版系统
- python 如何识别字符串中的人名 ,如何识别一串拼音字符串以及韵母的提取 (一些方法整理)
- 字节跳动校招开发一面、二面【凉】