首页 | 下载 | 帮助手册 | 使用示例 | 在线配置功能 | 论坛
不习惯此形式?点击查看左右分栏样式的帮助手册
软件介绍
免费使用
免费使用

ckplayer是一款在网页上播放视频的免费软件,主要特点是:免费,小巧,功能强大,定制方便。

任何个人网站或商业网站在不修改右键版权的基础上都可以免费使用。

注意事项

禁止非法破解,屏蔽ckplayer右键的版权信息及链接至官方的网址。

环境要求及播放器功能介绍
环境要求

ckplayer是一款基于网页前端的播放器软件,所以对环境的要求很低,只要您的环境支持html文件访问即可。

在普通使用时,不需要asp,.net,php,jsp等程序的支持。

支持的平台

支持安装了flashplayer插件的浏览器

支持HTML5平台

1399699624224453.jpg

1399699622188522.jpg

支持的浏览器

1399699624526665.jpg

支持的视频格式
视频协议视频格式FlashHTML5
HTTPflvg.jpgx.jpg
HTTPf4vg.jpgx.jpg
HTTPmp4g.jpgg.jpg
HTTPm3u8g.jpgg.jpg
HTTPwebmx.jpgg.jpg
HTTPoggx.jpgg.jpg
RTMPflvg.jpgx.jpg
RTMPf4vg.jpgx.jpg
RTMPmp4g.jpgx.jpg
RTMP直播流g.jpgx.jpg
HTML5下各浏览器对视频格式的支持

因为版权原因(每个浏览器的开发商如果要在自己开发的浏览器上支持相应的视频格式需要向该视频格式的开发者购买使用资格,主要因为价格原因),并不是所有浏览器对所有的视频格式都支持

浏览器及平台支持的视频格式
ChromeMP4, WebM
FirefoxMP4, WebM
Internet ExplorerMP4
AndroidMP4
iOSMP4
SafariMP4
HTML5下各平台对视频(播放器)重要功能的支持

各平台对视频(播放器)的支持程度是不同的。比如有些平台下,视频不能自动播放且不能预加载,即使设置了自动播放也是不可以的。主要是出于保护用户的流量等原因。

浏览器/平台是否支持封面是否支持预加载是否支持自动播放是否支持功能控制
Chromeg.jpgg.jpgg.jpgg.jpg
Firefoxg.jpgg.jpgg.jpgg.jpg
Internet Explorerg.jpgg.jpgg.jpgg.jpg
Androidg.jpgN/AN/Ag.jpg
iOSg.jpgN/AN/Ag.jpg
Safarig.jpgg.jpgg.jpgg.jpg
手机(HTML5)环境中播放视频需要了解的内容

虽然HTML5(下面简称:H5)的技术已整体趋于成熟,但在视频播放方面,如果跟pc端的flashplayer对比的话,功能就显的非常简单了。如果你决定要让你的视频支持在手机端(主要是iphone上)播放的话,需要了解下面这些内容。

1:视频格式必需是mp4的,iphone不支持flv,如果是直播视频,格式应该是m3u8,不支持rtmp协议的播放

2:H5不能把多个mp4合并成一个视频播放(像ckplayer在PC端的那样),如果视频切片的话请了解m3u8格式

3:H5的API总体来说还是够用的,比如用JS控制播放器的播放/暂停之类的。但复杂的操作就不支持了

4:H5的自动播放并不是所有的平台都支持,在有些环境(手机端),即使你设置了视频自动播放,环境也不允许该命令执行,必需经过用户点击才能播放。

5:H5在有些环境中(手机)必需点击全屏按钮才会触发视频播放。

总体说来,就是不同的平台(系统类型和浏览器类型)对H5并没有一个统一的标准。所以可能出现不同的问题,测试视频请多准备几个不同的手机。

安装和调用播放器
配置一个精简的播放器/按自己的需求进行文件的选择
文件结构介绍

文件结构说明.jpg

站内播放视频

ckplayer文件夹里至少要存在ckplayer.js,ckplayer.swf,language.xml,style.swf

使用分享功能

ckplayer文件夹里需要保留ckplayer.xml,share.xml,share文件夹

调用代码
使用原生的插入swf文件方式调用播放器
<embed src="http://www.ckplayer.com/ckplayer/6.5/ckplayer.swf" 
flashvars="f=http://movie.ks.js.cn/flv/other/2014/06/20-2.flv" quality="high" width="480" 
height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" 
type="application/x-shockwave-flash"></embed>

应该发现,这就跟调用一个普通的swf文件是一样的,只是多了一个flashvars参数用来传递一些值(比如视频地址,是否默认自动播放)给播放器而已。

js调用-智能判断平台调用合适的播放器进行播放(HTML5或flashPlayer)
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.mp4',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
</script>

CKobject.embed(

'flash播放器文件路径',

'容器ID',

'播放器的ID',

'宽度,可以是百分比',

'高度,可以是百分比',

优先调用设置,false=优先调用flash播放器,true=优先调用HTML5播放器

flash播放器的初始化参数,以及HTML5初始化参数,比如默认播放/暂停等设置,详细的可以参考【flashvars里各参数的说明】这一版块

HTML5视频播放地址,数组形式,详细的可参考HTML5视频调用的说明

)

只调用flash播放器
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.flv',
        c:0,
        b:1
    };
    var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
    CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params); 
</script>

CKobject.embedSWF('flash播放器路径',

'放置播放器的容器ID',

'播放器的ID',

'宽度,支持百分比',

'高度,支持百分比',

flashvars对象,初始化播放器参数,

相关的配置,如:背景色,是否允许全屏,是否允许交互,播放器是否透明

);

只调用HTML5播放器
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        p:1,
        e:1
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
    var support=['all'];
    CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>

CKobject.embedHTML5('放置播放器的容器的ID',

'播放器ID',

'宽高,支持百分比',

'高度,支持百分比',

视频地址,数组,因为不同的平台支持的视频格式不同,所以需要尽量多的视频格式来兼容,

初始化配置参数,比如默认是否播放,

在哪些平台上使用,all是指全部平台都调用

);

快速调用播放器

第一步:下载ckplayer

第二步:把ckplayer目录(注意是包含ckplayer.swf的目录,不是包含index.htm文件的目录)放到贵站根目录下。

第三步:打开http://www.贵站地址.com/ckplayer/ckplayer.swf?f=http://movie.ks.js.cn/flv/other/2014/06/20-2.flv

检查是否能播放视频,如果不能检查你的ckplayer.swf路径是否正确

第四步,在你的网页中要调用播放器的地方使用如下代码:

<embed src="http://www.贵站地址.com/ckplayer/ckplayer.swf" 
flashvars="f=http://movie.ks.js.cn/flv/other/2014/06/20-2.flv" quality="high" width="480" 
height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" 
type="application/x-shockwave-flash"></embed>

注意,上面是一行代码,不是多行。要调整下,打开页面看效果。成功调用

rtmp视频播放

调用rtmp视频和调用普通视频的方式一样,只是把普通的视频地址换成rtmp地址即可,比如

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'rtmp://localhost/live/livestreame',
        c:0
    };
    var video=['http://localhost/live.m3u8'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
</script>

这是普通的调用方式,同时也支持其它的调用方式,请自行查看手册了解。需要注意的就是rtmp是不支持html5环境下使用的,html5环境只支持m3u8的直播,所以上面示例中var video=['一个m3u8直播地址']

地址注意事项

如果是一级目录,则视频地址是rtmp://视频流地址/实例地址,如:rtmp:localhost/live/livestreame

如果是多级目录,则视频地址的格式是rtmp://流地址|实例地址或rtmp://流地址/mp4:实例地址,如:rtmp://localhost/live|2015/01/06/livestreame

另外一种形式就是:rtmp://localhost/live/mp4:2015/01/06/livestreame.mp4

在做直播的时候如果你的服务器环境设置了视频暂停则断开链接的功能的话,则需要配置好ckplayer.js中setup参数的第30个值,在播放rtmp视频时暂停后点击播放是否采用重新链接的方式,这里一共分0-2三个等级

功能配置&使用技巧
配置文件说明,建议先了解一下。方便您了解其它内容
配置功能前务必先看说明

播放器的功能配置文件分为二大部分:

一:播放器初始化功能,这部分功能是调用播放器时的配置,主要是设置"flashvars"对象的一些属性值,比如视频地址,默认是否播放等操作。

二:播放器固定功能,即这部分功能在“制作”播放器阶段已固定,后期不会有太大改动,比如logo图标等,这部分配置的文件主要是ckplayer.js文件和ckplayer.xml文件,有时还涉及到style.swf文件,当涉及到style.swf文件时,需把style.swf修改成style.zip,该文件压缩包里包含了所有的风格图片,插件文件以及风格配置文件style.xml。

修改固定功能配置,打开ckplayer.js和ckplayer.xml
修改右上角的logo/中间的logo

style.swf修改成style.zip(修改完成后再改回style.swf,并且清缓存),里面的cklogo.png是右上角的,logo.swf是中间的,你可以自己制作相同文件名的文件放进去替换,这二个logo都支持png或swf格式的。

logo的位置控制在ckplayer.js和ckplayer.xml里,以ckplayer.js为例分别是

logo: 'cklogo.png',
pm_logo: '2,0,-100,20',
mylogo: 'logo.swf',
pm_mylogo: '1,1,-100,-55',

控制位置的四个值的意思分别是:

1、水平对齐方式,0是左,1是中,2是右
2、垂直对齐方式,0是上,1是中,2是下
3、水平偏移量
4、垂直偏移

如果你不需要使用logo,可以设置如logo:'null',

去掉右边的开关灯功能,保留分享功能和调整功能

ckplayer.js中,找到:cpt_lights: '1',设置成cpt_lights: '0',

ckplayer.xml中,找到:<cpt_lights>1</cpt_lights>,修改成<cpt_lights>0</cpt_lights>

去掉右边的开关灯,分享,设置功能

在ckplayer.js中找到下面三行代码,删除掉

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|'; //调整大小和颜色的插件

在ckplayer.xml中找到下面三行代码,删除掉

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

修改完xml文件要清缓存,清xml缓存文件的最好最简单的办法是在浏览器里直接访问该页面后按F5刷新。

设置鼠标在播放器上的形状

setup这个参数,第一个值是控制鼠标经过播放器的形状的

0:普通形状

1:手型

2:经过按钮手型,其它普通形状

3:经过控制栏时手型,其它普通形状

前置广告是多个时进行随机播放/随机取出其中的几个进行播放

setup参数第7个值进行控制

0:广告进行顺序播放

1:广告进行随机播放,并且所有广告都会播放到

大于1是是随机取出(n-1)个数进行播放,比如设成2时,则取出(2-1)=1个广告进行播放,设成3时则取出(3-1)=2个广告进行随机播放。

让视频的宽高默认跟播放器的宽高一致

setup参数的第10个值设置成3

在播放多段视频时采用分段加载视频,节省服务器资源

setup参数的第11个值设置成:1

视频或地址加载失败后重新加载的次数设置

setup参数的23个值就设置视频或图片或外部配置文件加载失败后重新加载的最大次数。

关闭滚动文字广告

setup参数的第9个值设置成:0

修改滚动文字广告内容

advmarquee参数的内容就是文字广告内容,支持html。

如果不想在这里设置广告内容而需要在播放页里设置的话,则需要清空这里的内容,即:

advmarquee:'',

然后在调用播放器页面加入以下的js代码,代码最好是放在调用播放器的代码前面

function ckmarqueeadv(){
    return '广告内容,支持<a href="">链接</a>';
}

注意,设置广告时注意字体颜色,默认是黑色,会让人误以为没有设置成功。

滚动文字广告采用/关闭发光滤镜

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 将使对象的填充变为透明,并显示文档的背景颜色 
 

分享功能的配置

第一步:先修改ckplayer.js和ckplayer.xml里的以下参数

cpt_share: 'ckplayer/share.xml',

注意修改成你的share.xml所在的绝对路径,最好以http://开头的

第二步:打开share.xml,注意以下各代码的修改

{embed src="贵站网址,在ckplayer/share.xml里修改/ckplayer/ckplayer.swf" flashvars="[$share]" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"}{/embed}

src的值要修改成你的ckplayer.swf的绝对路径,以http://开头

<share_flash>
    贵站网址/ckplayer/ckplayer.swf?[$share]
</share_flash>

同样,修改成绝对路径

<share_path>ckplayer/share/</share_path>

上面是存放分享按钮图片的文件夹路径。用绝对路径,以http://开头

<share_flashvars>
    f,my_url,my_pic,a
</share_flashvars>

这里要根据实际情况进行调用,基本原则就是flashvars里的对应的参数提供到这里后不需要其它参数就可以正常播放。

<share_permit>0</share_permit>

如果你有视听许可证,可以设置成1,然后到http://www.bshare.cn找客服人员把你的域名加入到白名单里,你的视频可以直接在分享网站里进行播放。

另外需要注意的就是调用代码flashvars里必需要有my_url这个属性

播放结束后显示精彩视频推荐

前提是设置调用参数(flashvars={})里的e:3,然后打开ckplayer.js和ckplayer.xml找到如下代码

control_rel: 'related.swf,ckplayer/related.xml,0',

注意第二个参数要用绝对地址,这个文件里列出了精彩视频推荐的图片和标题。是一个xml文件,你也可以使用其它文件代替,比如asp,php,.net,jsp等。

如果需要进行动态调用的话。则需要了解一下flashvars里的a参数的使用意义。下面只举一个简单的使用示例,比如你的调用代码如下:

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'url.php',
  a:'123',
  s:2
  };
 var video=['http://www.ckplayer.com/webm/0.webm->video/webm'];
 CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
</script>

control_rel设置如下:

control_rel: 'related.swf,related.php?id=[$pat],0',

刚视频播放结束时会调用related.php?id=123这个地址调用精彩视频推荐的列表。

加载播放器时初始化设置,如定义视频地址,默认是否播放等内容
调用播放器简单代码示例,了解flashvars这个对象的使用位置和方法
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'http://movie.ks.js.cn/flv/other/1_0.mp4',
  c:0,
  loaded:'loadedHandler'
  };
 var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
 CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
</script>

本节内容所要讨论的就是调用代码里的flashvars对象的设置,演示里只有三个属性(值),f,c,loaded,在实际使用中会有更多的值提供使用,注意flashvars在js中是一个变量,该变量的性质是对象,里面各个属性需要用逗号隔开,但一定要注意最后一个属性不能有逗号,不然在有些浏览器中无法正确运行。

flashvars里各参数的意思
属性默认值功能功能说明
f 视频地址/网页地址s=0时f=视频地址
s>0时f=网页地址
a 网页传递参数s>0是,用来跟f值组装地址用到的变量
s 调用方式

=0:普通视频调用方式
=1:网址形式调用
=2:XML(网址)形式调用
=3:flash形式调用视频地址
=4:flash插件形式发送视频流地址给播放器进行播放

c1调用配置方式=0:调用ckplayer.js
=1:调用ckplayer.xml
注意:如果不设置该参数,则调用ckplayer.xml
x 配置文件路径c=0时,x默认=ckstyle,即调用function ckstyle()
c=1时,x默认=ckplayer.xml
i 默认暂停可显示一张图片当p=0,p=2时,播放器会加载该值定义的图片地址,不让播放器看上面一片黑
d 暂停广告地址暂停广告地址(组),如:
d='1.swf'或d='1.swf|2.jpg'
u 暂停广告链接地址暂停广告链接地址(组),如:
u=''或u='|abc.htm'
请注意观察,如果d值设置的是swf就不需要给其一个链接地址了,当然也可以设置,则swf广告本身的链接无效
l 前置广告地址视频播放前播放的广告地址(组),如:
  l='1.flv'或l='1,flv|2.swf|3.jpg'
r 前置广告链接地址前置广告对应的链接地址(组),如:
r='1.htm'或r='1.htm||3.htm'
注意:当l里对应的是swf是,可以设置或不设置链接地址
t5前置广告的时间前置广告时间(组),如:
t='15'或t='15|10|10'
y 前置广告的网址输出如果不想使用l,r,t三个参数来定义广告地址,而需要用一个单独的网址来管理广告内容。则需要用到y,此时必需设置l,r,t的值为空,y的使用方法可以跟a值配合使用,如:
a:'1'
y:'adv.php?id=[$pat]'则会调用adv.php?id=1来调用广告内容,该页面的内容示例为:{l->1.flv|2.swf|3.jp}{r->1.htm|2.htm|3.htm}{t->10|15|30}
z 缓冲广告地址缓冲广告地址,如果使用缓冲广告,请在配置文件里开启,开启的方法是打开ckplayer.js(ckplayer.xml)找到setup参数第17个值设置成1
e0播放结束的动作=0:调用js函数(function playerstop(){})
=1:循环播放
=2:暂停播放并且不调用广告
=3:调用精彩视频推荐列表的插件
=4:清除视频流并调用js(function playerstop(){})和1差不多
=5:暂停播放并且调用暂停广告
=6:调用js函数(function playerstop(){})并且退出全屏
v80默认音量设置成-1则默认静音
p1默认是否播放/不加载视频=0:默认暂停
=1:默认播放
=2:默认不加载视频
h0视频是否支持播放未下载的内容=0:不支持,普通播放
=1:按关键帧进行拖动
=2:按关键时间点进行拖动
=3:自动判断,根据视频后缀进行判断
=4:按关键字进行判断,视频地址里包含mp4字样则按关键帧,包含flv字样则按关键时间点
qstart视频拖动时传递的参数当h>0时,拖动的参数,如1.flv?start=45646
m 广告视频链接地址当该值为一个链接地址时,点击视频则跳转到该地址
o 视频时间,单位:秒当p=2时,可以默认显示视频的总时间
w 视频文件大小,单位:字节当p=2时,默认调用该值确认视频大小
g 跳过片头跳过片头功能。即直接从该秒进行播放,同时支持'01:02:03'这样的时间格式
j 跳过片尾跳过片尾功能,j>0则从播放多少时间后跳到结束,<0则总总时间-该值的绝对值时跳到结束
k 提示点时间列表如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字
n 提示点文字列表提示点文字,跟k配合使用,如 提示点1|提示点2
b 是否允许js和播放器交互1是不允许,0是允许,默认0
wh 限制视频宽高比例可以自己定义视频的宽高或宽高比如:wh:'4:3',或wh:'1080:720'
lv0是否锁定进度栏0:不锁定,1:锁定
st0直播是否需要进行secureToken验证0:不使用,1:使用
fc0是否需要进行FCSubscribe验证0:不使用,1:使用
un 直播视频的用户名 
up 直播放视频的用户密码 
loaded 播放器加载成功调用的js函数调用的js函数名称
    
my_url 当前页面地址分享视频时必需参数,分享平台会自动根据该地址调用标题,图片等信息
my_title 视频标题可以自己设置一个标题分享给分享平台
my_pic 视频图片可以自己定义一个图片地址分享给分享平台
最简单的调用视频代码-不能隐藏视频地址
var flashvars={
    f:'视频地址.flv/mp4,rtmp地址',
    s:0,
    c:0
}

s=0,说明是普通调用方式,此时f值只能是一个普通的视频地址。c=0是指播放器调用ckplayer.js中的ckstyle()函数构建界面。=1则是调用ckplayer.xml构建界面。

用网址形式调用视频地址-可以隐藏视频地址
var flashvars={
    f:'url.php?id=[$pat]',
    a:'1',
    s:1,
    c:0
}

当s=1时,播放器将会调用(根据f值和a值组装成后的)一个页面地址来调用视频地址,视频地址放在页面地址(url.php?id=1)里

url.php?id=1这个地址里只要输出如下代码即可:

http://www.ckplayer.com/video/1.mp4

注意,是打开这个页面,点击右键>查看源代码里面显示这个视频地址,而不是打开网页看到的。

这个地址还可以加入一些其它的参数,比如暂停广告的地址和链接地址,示例如下:

{d->暂停广告地址}http://www.ckplayer.com/video/1.mp4

上面是演示了在不同地址里加入不同的暂停广告的示例。使用该功能需要注意并不是所有参数都可以加在这里。

用xml(地址)形式调用视频

调用代码如下:

var flashvars={
    f:'url.xml',
    s:2
}

如果需要用动态地址输出视频地址,则调用方式如:

var flashvars={
    f:'xml.php?id=[$pat]',
    a:'1',
    s:2
}

当使用上面这段代码的时候,播放器会调用xml.php?id=1这种形式对应的xml格式的地址进行播放

xml.php里输出的格式如下:

<?xml version="1.0" encoding="utf-8"?>
    <ckplayer>
        <flashvars>{h->2}</flashvars>
        <video>
            <file>1.flv</file>
            <size>27736485</size>
            <seconds>141</seconds>
        </video>
        <video>
            <file>2.flv</file>
            <size>48043884</size>
            <seconds>124</seconds>
        </video>
</ckplayer>

表示 的意思如下:

<?xml version="1.0" encoding="utf-8"?>
    <ckplayer>
        <flashvars>{h->2}{i->初始图片地址等相关参数也可以在这里进行设置}</flashvars>
        <video>
            <file>视频地址分段1</file>
            <size>视频大小,字节</size>
            <seconds>视频时长,秒</seconds>
        </video>
        <video>
            <file>视频地址分段2</file>
            <size>视频大小,字节</size>
            <seconds>视频时长,秒</seconds>
        </video>
</ckplayer>

上面的代码可以看出,可以在这里设置flashvars参数来定义不同的视频地址输出不同的相关内容,如视频默认暂停时的图片:{i->图片地址}

使用swf向播放器传递视频地址进行播放-可以隐藏视频地址

调用代码如下:

var flashvars={
    f:'geturl.swf',
    s:3
}

此时播放器初始化时将加载geturl.swf,geturl.swf的作用是通过actionscript的api向播放器发送一个视频地址(组),至于geturl.swf里进行了怎样的操作将看你的发挥了。可以进行地址加密验证之类的。下面是一个最简单的示例:

var ck:Object;
function setAppObj(app:Object):void{
    ck=app;
    ck.loadAddress("1.flv|2.flv","23212|45654","80|120");
}

当播放器加载完geturl.swf时,会向该swf里发送一个函数:setAppObj(播放器实例)

ck=app即ck=播放器

loadAddress是播放器里提供的一个函数(api),该接口可以接收视频地址进行播放

使用swf形式向播放器发送一个视频流进行播放

该形式可以开发出支持更多视频格式的播放器,如论坛里提供下载的m3u8插件即是使用的该种方式。下载地址是:http://www.ckplayer.com/bbs/forum.php?mod=viewthread&tid=8947

打开源文件可以看到里面的注释,主要的一个代码是:ck.sendNetStream(netstreame);把流通过api函数“sendNetStream”发送给播放器。

视频默认播放/默认暂停/默认不加载视频
var flashvars={
    p:0
}

p=0,默认暂停,但视频会加载

p=1,默认播放

p=2,默认不加载视频,只有点击播放才会开始加载视频

使用技巧
在html5调用时隐藏视频地址

先看下面的这段代码:

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        p:1,
        e:1
    };
    var video=['geth5.php?id=123->ajax/get/utf-8'];
    var support=['all'];
    CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>

上面的代码是通过js的ajax读取视频地址进行播放,并且可以采用post发送方式获取地址(演示里是使用的get)。

geth5.php里的输出内容如下:

http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg

如果你只有一个视频地址,则如下:

http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4

这样就可以实现隐藏视频地址了,请注意,js的ajax不支持跨域,如果你是跨域调用,可以在播放器同域里单独用一个服务器端程序跨域调用。

配置文件里,视频地址替换符(pm_repc)的用法介绍

该功能主要是用来做简单加密的功能,使用方法很简单,请注意,只针对f值是视频地址的时候有效,其它地方不能使用,该功能不管s的值是多少都可以使用

简单的示例:

比如:

ckplayer.js中的pm_repc:'a->b|c->d'

如果你原来的

flashvars={f:'bd.flv'},注意bd.flv是正确的视频地址

则你现在可以用flashvars={f:'ac.flv'},这样当播放器访问时会自动访问bd.flv,但当普通用户想下载这里的ac.flv是下载不到的

风格配置
风格介绍,按钮位置控制,及风格处理的一些方法
风格配置文件介绍

风格是一个zip压缩包,文件名称是style.swf。因为有些空间不支持zip的下载,固默认把style.zip改成了style.swf,如果你要修改里面的内容,则需要把style.swf改回style.zip,修改后再改成style.swf即可使用。

在测试时可以设置ckplayer.js或ckplayer.xml中的cpath值为:

cpath:'style.zip',

<cpath>style.zip</cpath>

这样在测试阶段就不需要对风格文件包改来改去了

正式使用时建议使用style.swf

style.swf压缩包里的文件结构如下图:

未标题-1.jpg

style.swf(修改成style.zip)里面的style.xml文件介绍

该文件是一个xml文件,里面定义了所有播放器必需的图片名称及各按钮的坐标控制

<?xml version="1.0" encoding="utf-8"?>
<ckplayer>
 <style>  
  <controlbar>images_buttom_bg.png</controlbar>
  <!--
  控制栏背景图片
  -->
  
  <cplay>images_Play_out.png,images_Play_on.png</cplay>
  <!--
  播放按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <cpause>images_Pause_out.png,images_Pause_on.png</cpause>
  <!--
  暂停按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <pausec>images_Pause_Scgedyke.png,images_Pause_Scgedyke_on.png</pausec>
  <!--
  播放器中间暂停按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <sound>images_Sound_out.png,images_Sound_on.png</sound>
  <!--
  静音按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <mute>images_Mute_out.png,images_Mute_on.png</mute>
  <!--
  取消静音按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <full>images_Full_out.png,images_Full_on.png</full>
  <!--
  全屏按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <general>images_General_out.png,images_General_on.png</general>
  <!--
  取消全屏按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <cvolume>images_Volume_back.png,images_Volume_on.png,images_Volume_Float.png,images_Volume_Float_on.png</cvolume>
  <!--
  音量调节框的四个图片
   1、调节框的背景图片(显示总体音量,1-100)
   2、调节框的前景图片(显示当前音量的)
   3、拖动按钮普通状态下的图片
   4、拖动按钮鼠标经过时的图片
  -->
  
  <schedule>images_Schedule_bg.png,images_Schedule_load.png,images_Schedule_play.png,images_Schedule.png,images_Schedule_on.png</schedule>
  <!--
  进度栏的五个图片
   1、进度栏背景图片
   2、已加载进度图片
   3、已播放进度图片
   4、拖动按钮普通状态下的图片
   5、拖动按钮鼠标经过时的图片
  -->
  
  <fast>images_Fashf_out.png,images_Fashf_on.png,images_Fashr_out.png,images_Fashr_on.png</fast>
  <!--
  快进和快退按钮图片
   1、快进按钮普通状态下的图片
   2、快进按钮鼠标经过时的图片
   3、快退按钮普通状态下的图片
   4、快退按钮鼠标经过时的图片
  -->
 
  <advmute>images_v_off_out.png,images_v_off_on.png,images_v_on_out.png,images_v_on_on.png</advmute>
  <!--
  前置广告时静音按钮的四个图片
   1、静音按钮普通状态下的图片
   2、静音按钮鼠标经过时的图片
   3、取消静音按钮普通状态下的图片
   4、取消静音按钮鼠标经过时的图
  -->
  
  <advjump>images_adv_skip_out.png,images_adv_skip_on.png</advjump>
  <!--
  前置广告时路过按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
 
  <advclose>images_close_adv_out.png,images_close_adv_on.png</advclose>
  <!--
  关闭滚动文字广告按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
 
  <padvclose>pause_adv_close_out.png,pause_adv_close_on.png</padvclose>
  <!--
  关闭暂停广告按钮的二个图片
   1、普通状态下的图片
   2、鼠标经过时的图片
  -->
  
  <pm_tween>50,300,300</pm_tween>
  <!--
  1、控制栏向下缓动的距离,0是不缓动直接隐藏,1是透明度从1到0缓动,>1则是向下缓动,数值是向下缓动的距离
  2、控制栏缓动的毫秒数
  3、视频在播放器尺寸变化时是否采用缓动效果,0是不缓动,>0是采用缓动的秒数
  -->
 
  <buffer>buffer.swf</buffer>
  <!--缓冲时显示的图标-->
  <!--以上是播放器用到的按钮和控制栏的图片,可以自己更改图片样式和坐标,坐标在本文档里配置-->
 
  <pm_load>1,1,-30,10,0,200,0</pm_load>
  <!--
  提示加载视频百分比的文本框
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、文本对齐方式:0是左对齐,1是中间对齐,2是右对齐,3是默认对齐(相当于左对齐)
   6、文本框的宽,只有在左/右对齐时有效
   7、文本框的高
   特别说明:在所有关于文本的控制中,只有设置了左右对齐,后面的宽度才会有效果,如果设置的中间对齐,则宽度无效果
  -->
  
  <pm_buffer>1,1,-20,-35</pm_buffer>
  <!--缓冲时显示的图标(buffer图标)的坐标-->
  
  <pm_buffertext>1,1,-13,-25,0,40,0</pm_buffertext>
  <!--
  缓冲文本框(提示加载百分比)的坐标
   缓冲进度文本框(提示缓冲百分比)的坐标
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、文本对齐方式:0是左对齐,1是中间对齐,2是右对齐,3是默认对齐(相当于左对齐)
   6、文本框的宽,只有在左/右对齐时有效
   7、文本框的高
   特别说明:在所有关于文本的控制中,只有设置了左右对齐,后面的宽度才会有效果,如果设置的中间对齐,则宽度无效果
  -->
  
  <pm_ctbar>1,2,0,-30,0,30,0</pm_ctbar>
  <!--
  控制栏的参数(进度栏和滚动文字广告栏的坐标也是7个参数,都参考这里)
  这里分二种情况,前六个参数是控制第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、定位方式
  -->
  
  <pm_sch>1,2,15,-37,15,5,0,14,14</pm_sch>
  <!--
  进度条的参数,这里分二种情况
   第一种情况:第7个参数是0的时候,相对定位,就是播放器长宽变化的时候,控制栏也跟着变
    1、默认1:中间对齐
    2、上中下对齐(0是上,1是中,2是下)
    3、离左边的距离
    4、Y轴偏移量
    5、离右边的距离
    6、高度
    7、定位方式
    8、拖动按钮的宽
    9、拖动按钮的高
   第二种情况:第7个参数是1的时候,绝对定位,就是播放器长宽变化的时候,控制栏不跟着变,这种方式一般使用在控制栏大小不变的时候
    1、左中右对齐方式(0是左,1是中间,2是右)
    2、上中下对齐(0是上,1是中,2是下)
    3、x偏移量
    4、y偏移量
    5、宽度
    6、高度
    7、定位方式
    8、拖动按钮的宽
    9、拖动按钮的高
  -->
  
  <pm_play>0,2,0,-30,35,30</pm_play>
  <!--
  播放按钮的位置
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、按钮宽
   6、按钮高
  -->

  <pm_clock>0,2,100,-25,2,0,0</pm_clock>
  <!--
  显示当前播放时间和总时间的位置,这个要跟pr_clock的设置配合使用
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、文本对齐方式(0左,1中,2右)
   6、宽度
   7、高度
  -->
  
  <pm_clock2>0,2,40,-25,0,0,0</pm_clock2>
  <!--该功能跟pm_clock的功能一致,主要是为了在做风格时需要在二个不同的地方显示已播放时间和总时间时使用-->
  
  <pr_clock></pr_clock>
  <!--
  这里显示播放时间和总时间,[$Time]会被替换成已播放时间,[$TimeAll]会被替换成总时间
  [$Timewait]参数会被替换成在默认不加载的时候并且没有设置各段视频的时间和字节的时候显示pr_clockwait的值
  -->

  <pr_clock2>{font color='#FFFFFF' size='12' face='Arial'}[$Time] | [$TimeAll][$Timewait]{/font}</pr_clock2>
  <!--
  这里显示播放时间和总时间,[$Time]会被替换成已播放时间,[$TimeAll]会被替换成总时间
  [$Timewait]参数会被替换成在默认不加载的时候并且没有设置各段视频的时间和字节的时候显示pr_clockwait的值 
  ck.pr_clock和ck.pr_clock2配合使用可以同时在二个不同的位置显示已播放时间和总时间 
  -->

  <pm_timestyle>1</pm_timestyle>
  <!--
  时间显示样式,0是显示为“分:秒”,1是显示为“时:分:秒”
  -->

  <pm_full>2,2,-35,-30,35,30</pm_full>
  <!--
  全屏和取消全屏按钮的坐标
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、宽度
   6、高度
  -->
  
  <pm_vol>2,2,-95,-18,53,4,12,12</pm_vol>
  <!--
  音量调节框的坐标
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、音量控制区域的宽度
   6、音量控制区域的高度
   7、拖动按钮的宽度
   8、拖动按钮的高度
  -->
  
  <pm_sound>2,2,-130,-30,35,30</pm_sound>
  <!--
  静音和取消静音的坐标
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量 
   5、宽度
   6、高度
  -->
  
  <pm_fastf>2,2,-13,-39,13,9</pm_fastf>
  <!--
  快进按钮的坐标
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量 
   5、宽度
   6、高度
  -->
  
  <pm_fastr>0,2,0,-39,13,9</pm_fastr>
  <!--
  快退按钮的坐标
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量 
   5、宽度
   6、高度
  -->

  <pm_pa>1,1,-33,-50,66,66,0,2,10,-120</pm_pa>
  <!--
  中间暂停按钮的坐标控制,四个一组
   1、没有暂停广告时水平对齐方式,0是左,1是中,2是右
   2、没有暂停广告时垂直对齐方式,0是上,1是中,2是下
   3、没有暂停广告时水平偏移量
   4、没有暂停广告时垂直偏移量 
   5、宽度
   6、高度
   7、有暂停广告时水平对齐方式,0是左,1是中,2是右
   8、有暂停广告时垂直对齐方式,0是上,1是中,2是下
   9、有暂停广告时水平偏移量
   10、有暂停广告时垂直偏移量
  -->

  <pm_bg>0x000000,100,230,180</pm_bg>
  <!--
  播放器整体的背景配置
   1、整体背景颜色
   2、背景透明度
   3、播放器最小宽度
   4、播放器最小高度
   3,4二个值主要是控制不让播放器上各元素错位
  -->

  <pm_video>0,0,0,0,0xffdd00,0,0,0,0,0</pm_video>
  <!--
  视频固定区域
   1、控制栏未隐藏时左边预留宽
   2、控制栏未隐藏时上面预留高度
   3、控制栏未隐藏时右边预留宽度
   4、控制栏未隐藏时下面预留高度
   5、该区域背景颜色
   6、该区域背景透明度
   7、控制栏隐藏时左边预留宽
   8、控制栏隐藏时上面预留高度
   9、控制栏隐藏时右边预留宽度
   10、控制栏隐藏时下面预留高度
  -->

  <pm_pr>0x000000,0xFFFFFF,0xffffff,0,30,80,10</pm_pr>
  <!--
  鼠标经过按钮或进度栏显示一个文字提示框
   1、提示框背景颜色
   2、边框颜色
   3、文字的颜色
   4、边框的弧度
   5、提示框透明度
   6、文字透明度
   7、离按钮的距离,这里指提示框的底部离所需提示的按钮上方的距离
  -->

  <pm_advbg>0x000000,100</pm_advbg>
  <!--
  播放前置广告时底部颜色和透明度,这是一个层,主要用来遮住播放器上的所有元件和元素,不让用户点击
   1、底部颜色
   2、透明度
  -->

  <pm_start>8,5,0xFFFFFF,100</pm_start>
  <!--
  进度栏提示点宽,高,颜色,透明度,这是用来制作在进度栏上根据设定的内容为观看者提供视频里关键时间点内容简介的指示块
  -->

  <pm_sce>3,0x6E6E6E,100,0xFF0000,100</pm_sce>
  <!--
  当控制栏隐藏时在底部显示一个进度条
   1、进度条的高度
   2、底部颜色
   3、底部颜色透明度
   4、进度颜色
   5、进度颜色的透明度
  -->

  <author></author>
  <!--
  风格作者的昵称和链接地址,昵称和链接地址之间用逗号隔开
  -->
 </style>
</ckplayer>

 

坐标控制,例:修改播放按钮的坐标位置

控制播放按钮的位置的参数是:

<pm_play>0,2,0,-30,35,30</pm_play>
<!--
  播放按钮的位置
   1、水平对齐方式,0是左,1是中,2是右
   2、垂直对齐方式,0是上,1是中,2是下
   3、水平偏移量
   4、垂直偏移量
   5、按钮宽
   6、按钮高
  -->

我们只看前面四个值的意思

第一个参数是水平对齐方式。

当是0的时候,则认为播放器左边界为x坐标的0点。此时第三个参数>0的值比如为20,则坐标为(0+20)=20个像素,播放按钮离左边的距离是20个像素并保持不变。

如果第三个参数<0,如-20,则播放按钮的坐标是(0-20)=-20个像素,很明显播放按钮到了播放器外面去了

同样,第一个参数=1时,水平方向以中间为坐标轴0点。以此类推。


默认风格,怎样才可以让控制栏不挡住视频

style.swf修改成style.zip,然后把里面的style.xml拖出来,找到如下位置的代码:

<pm_video>0,0,0,0,0xffdd00,0,0,0,0,0</pm_video>
        <!--
        视频固定区域
            1、控制栏未隐藏时左边预留宽
            2、控制栏未隐藏时上面预留高度
            3、控制栏未隐藏时右边预留宽度
            4、控制栏未隐藏时下面预留高度
            5、该区域背景颜色
            6、该区域背景透明度
            7、控制栏隐藏时左边预留宽
            8、控制栏隐藏时上面预留高度
            9、控制栏隐藏时右边预留宽度
            10、控制栏隐藏时下面预留高度
        -->

第4个参数设置成控制栏的高度:35

意思就是说在控制栏没有隐藏的时候,视频下方至少预留35个像素。

播放器尺寸太小,导致 控制栏等按钮都显示不全

控制栏的大小是有限制的。如果播放器调用尺寸太小,对按钮的位置不作限制的话就会导致按钮重叠。当然你也可以不限制,调整的方法就是把style.swf改成style.zip,把里面的style.xml拖出来。找到<pm_bg>0x000000,100,230,180</pm_bg>

请注意,该参数在ckplayer.js和ckplayer.xml里也都有对应的,建议一起改掉

只要把最后的二个参数230,180,改成比如0,0就不限制了。

风格设计简单教程

ckplayer的风格制作很简单,只需要了解以下几点即可。

最主要的会处理图片,全使用ps软件,只要会这个。制作风格就轻而易举了。

然后首先了解一下风格包的结构

ckplayer的风格组成就是图片+配置文件:

1:图片就是各个按钮的图片(按钮图片分二张,一张是普通状态,一种是鼠标经过时的样子)和进度条,音量调节条的图片。

2:配置文件是用来控制按钮以及其它图片的位置用的。是一个简单的xml格式的文本,用记事本打开就可以进行修改,但最好是用别的比较专业的文本编辑器进行编辑,比如dw,editplus

ckplayer的风格图片和配置文件是放在一个压缩包里的。你可以把官方下载的文件夹里的style.swf修改成style.zip,然后解压缩,即可以看到里面是所有的图片和一个style.xml(位置控制文件即配置文件),我们要做的就是修改图片,然后进位置进行控制就可以了。

下面开始动手

一:把style.swf修改成style.zip
二:我们先制作一个播放按钮鼠标经过时的图片效果替换官方默认的。比如images_Play_on.png(把该图片保存,名称是images_Play_on.png),然后用这个图片替换style.zip里官方的

三:再把style.zip改成style.swf,清浏览器的缓存(最好是手动清除或换一个浏览器看效果),刷新页面,鼠标经过播放按钮。看看,样子变了吧?

到此,基本就了解了如何修改播放器风格了。

下面我们再一起对位置进行控制,同样的,我们修改播放按钮的位置。还要把style.swf改成style.zip,把里面的style.xml用文本编辑器打开。找到<pm_play>0,2,0,-30,35,30</pm_play>这一行,这一行是控制播放按钮和暂停按钮的位置的,最后二个参数没有用,不需要理会,只管前面四个参数的意思。

1、水平对齐方式,0是左,1是中,2是右
2、垂直对齐方式,0是上,1是中,2是下
3、水平偏移量
4、垂直偏移量

这4个参数,你可以随便调整然后看效果。注意清空浏览器缓存。

四:关于进度栏的要注意,进度栏背景,加载进度条,播放进度条官方默认的都是一个像素的宽,然后在播放器里进行拉伸操作的。

五:进度栏的拖动按钮的位置是根据进度栏的高进行计算的,保证上下距中对齐的方式

六:进度栏的位置控制需要用到7个参数,请注意各参数的意思。

因为本节是简单教程,所以本教程到此结束。

语言配置
语言包的介绍和修改方法
语言包说明

播放器的语言包放在language.xml里,这里可以把播放器的界面语言统一修改成其它语言使用,简单方便。

语言包内容预览
<?xml version="1.0" encoding="utf-8"?>
 <ckplayer>
  <style>
   <pr_zip>{font color='#FFFFFF' face='NSimSun'}已加载[$prtage]%{/font}</pr_zip>
   <!--
   加载皮肤包进度提示的文字,[$prtage]会被替换成加载百分比
   -->

   <pr_load>{font color='#FFFFFF' face='NSimSun'}已加载[$prtage]%{/font}</pr_load>
   <!--
   当调用多段视频时,并且没有配置好各段视频的时间和字节数的情况下,播放器需要先读取各段视频的元数据进行计算,此时需要显示一个加载进度告诉用户已计算的情况。 
   -->

   <pr_noload>{font color='#FFFFFF' face='NSimSun'}加载失败{/font}</pr_noload>
   <!--
   加载视频失败时显示的内容 
   -->

   <pr_buffer>{font color='#FFFFFF' face='Arial'}[$buffer]%{/font}</pr_buffer>
   <!--
   视频缓冲时显示的提示,[$buffer]会被替换成缓冲的百分比数字部份
   -->

   <pr_play>{font color='#FFFFFF' face='NSimSun'}点击播放{/font}</pr_play>
   <!--
   鼠标经过播放按钮时的提示,支持html 
   -->

   <pr_pause>{font color='#FFFFFF' face='NSimSun'}点击暂停{/font}</pr_pause>
   <!--
   鼠标经过暂停按钮时的提示,支持html 
   -->

   <pr_mute>{font color='#FFFFFF' face='NSimSun'}点击静音{/font}</pr_mute>
   <!--
   鼠标经过静音按钮时的提示,支持html 
   -->

   <pr_nomute>{font color='#FFFFFF' face='NSimSun'}取消静音{/font}</pr_nomute>
   <!--
   鼠标经过取消静音按钮时的提示,支持html 
   -->

   <pr_full>{font color='#FFFFFF' face='NSimSun'}点击全屏{/font}</pr_full>
   <!--
   鼠标经过全屏按钮时的提示,支持html 
   -->

   <pr_nofull>{font color='#FFFFFF' face='NSimSun'}退出全屏{/font}</pr_nofull>
   <!--
   鼠标经过退出全屏按钮时的提示,支持html 
   -->

   <pr_fastf>{font color='#FFFFFF' face='NSimSun'}快进{/font}</pr_fastf>
   <!--
   鼠标经过快进按钮时的提示,支持html 
   -->

   <pr_fastr>{font color='#FFFFFF' face='NSimSun'}快退{/font}</pr_fastr>
   <!--
   鼠标经过快退按钮时的提示,支持html 
   -->

   <pr_time>{font color='#FFFFFF' face='Arial'}[$Time]{/font}</pr_time>
   <!--
   鼠标经过进度栏时提示当前点上时间的,[$Time]会被替换成时间,支持html 
   -->

   <pr_volume>{font color='#FFFFFF' face='NSimSun'}音量[$Volume]%{/font}</pr_volume>
   <!--
   鼠标经过音量调节框或调整音量时提示,[$Volume]会自动替换音量值(0-100) 
   -->

   <pr_clockwait>{font color='#FFFFFF' face='Arial'}00:00 | 00:00{/font}</pr_clockwait>
   <!--
   在默认不加载视频,即m=1的时候,同时并没有设置视频的时间和字节,即o和w值的时候,pr_clock和pr_clock2里的所有内容被替换成这里设置的值 
   -->

   <pr_live>{font color='#FFFFFF' face='NSimSun'}视频直播中{/font}</pr_live>
   <!--
   在直播的情况下显示的文字 
   -->

   <pr_adv>{font color='#FFFFFF' size='12'}广告剩余:{font color='#FF0000' size='15'}{b}[$Second]{/b}{/font} 秒{/font}</pr_adv>
   <!--
   广告倒计时显示的内容,[$Second]将会显示倒计时的秒数
   -->

  </style>
 </ckplayer>

语言的定义支持简单的HTML语法

javascript-api
使用javascript-api需要注意的参数和事项
javascript-api介绍

javascript-api可以做到让js和播放器之间进行通信,实现交互功能。ckplayer提供了大量的接口函数以供使用。比如用js控制自动播放下一集的功能。或者监听当前视频播放失败后重新调用其它视频地址的功能。

使用javascript-api需要注意的参数和事项

使用前需注意,监听共分二种,一种是全部监听,即用一个函数监听所有的状态。另一种是单独监听,只监听指定的动作是否触发。

在使用前需要了解三个参数的作用。如下:

第一个重要参数是:ckplayer.js和ckplayer.xml中的setup的第21个值,该值的作用是否否开启全部监听及监听等级的功能,在正式使用时建议不要开启该功能,因为如果你不熟悉js的话,大量的交互可能导致浏览器的内存消耗,甚至会导致flashplayer插件崩溃。

第二个重要参数是:var flashvars={}里的b值,如果你不使用交互,请将b设置成1

第三人重要参数是:var flashvars={}里的loaded值,如果要使用单独监听的话需要使用到该值,因为监听播放器的前提是要等播放器加载完成再给播放器发送监听函数。

javascript-api
全部监听-api的使用

首先要确认ckplayer.js或ckplayer.xml里的setup参数的第21个值>0

然后调用播放器页面里要存在如下js函数代码

function ckplayer_status(str){
    str=监听到的状态及值
}

这个函数也是可以自定义的,定义的方法是ckplayer.js(ckplayer.xml)中的calljs参数的第一个值

使用单独监听的前提

要使用单独监听需要确保播放器已加载,当flashvars里设置了loaded参数的值后,播放器(包括flash播放器和html5播放器)加载成功后会向页面发送loaded的值对应的js函数,以下是一个完整的确认播放器已加载的代码实例:

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    function loadedHandler(){
        if(CKobject.getObjectById('ckplayer_a1').getType()){
            alert('播放器已加载,调用的是HTML5播放模块');
        }
        else{
            alert('播放器已加载,调用的是Flash播放模块');
        }
    }
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/2014/06/20-2.flv',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
</script>

当播放器加载完成后会调用js函数:loadedHandler()

CKobject.getObjectById('ckplayer_a1').getType()接口函数可以判断当前播放器调用的是flash还是html5

一个简单的单独监听示例
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    function loadedHandler(){
        if(CKobject.getObjectById('ckplayer_a1').getType()){
            alert('播放器已加载,调用的是HTML5播放模块');
            CKobject.getObjectById('ckplayer_a1').addListener('play',playHandler);
        }
        else{
            alert('播放器已加载,调用的是Flash播放模块');
            CKobject.getObjectById('ckplayer_a1').addListener('play','playHandler');
        }
    }
    function playHandler()[
        alert('播放了');
    }
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/2014/06/20-2.flv',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
</script>

本示例演示了监听播放器是否播放的监听功能,当播放器播放时会调用js函数:playHandler()。

需要注意的就是添加监听要在flash和html5环境中分开添加。所以上面的代码添加了二次监听。

可以添加监听,就可以删除监听,如下是删除监听的代码示例:

CKobject.getObjectById('ckplayer_a1').removeListener('play',playHandler);//html5下的删除监听
CKobject.getObjectById('ckplayer_a1').removeListener('play','playHandler');//flash环境中的删除监听


监听属性列表
属性功能说明flashhtml5
加载部分
plugLoadError:String插件加载失败:插件名称 
前置广告部分
frontAdContinue前置广告运行中 
frontAdPause前置广告暂停 
frontAdNext开始加载下一个广告 
frontAdEnd前置广告播放结束 
frontAdMuted:Boolean前置广告是否有声音:true/false 
frontAdError:String前置广告加载失败:加载失败的广告地址 
frontAdStart:String前置广告加载成功并开始播放:广告地址 
frontAdSkip跳过前置广告 
视频部分
newVideo开始建立一个新的视频播放程序 
videoLoad开始分析视频加载方式 
error视频加载失败
sendNetStream接收到视频流,说明视频加载成功,随时可以播放
loadedmetadata分析出视频元数据信息
ended视频播放结束
totaltime:Number视频总时间:秒,精确到小数点后三位
time:Number视频已播放时间:秒,精确到小数点后三位
totalbytes:Number视频总大小:字节
bytes:Number已加载字节
loadComplete视频加载结束
speed:Number视频单位时间内加载的字节数 
buffer:int缓冲百分比:0-100,接收到100时说明本次缓冲结束 
bounceTime:Number鼠标在进度条上松开时的时间点 
play播放
pause暂停
paused:Boolean是否暂停:true/false
seeking:Number跳转的时间:秒
fastNext快进 
fastBack快退 
videoClear视频被清除 
muted:Boolean是否静音:true/false 
volumechange:int改变了音量:0-100 
视频画面处理
coordinateChange:Array视频区域被改变,比如隐藏/显示控制栏,全屏/退出全屏时都会触发,返回一个数组[x,y,width,height] 
brightnessChange:int改变了亮度值,值的大小是 -255--255   0为中间值 
contrastChange:int改变了对比度值,值的大小是 -255--255  127.5为中间值 
saturationChange:int改变了饱和度值,值的大小是 -255--255,1为中间值,0为灰度值 
sethueChange:int改变了色相值,值的大小是 -255--255  0为中间值 
文字广告部分
changeMarquee文字广告内容被改变 
marqueeError文字广告加载出错 
marqueeLoaded文字广告加载成功 
marqueeClose文字广告关闭 
播放器交互
myObjectChange:Object自定义的对象发生改变 
flashvarsChange:Objectflashvars对象发生改变 
styleChange配置参数发生改变 
addListenerReplace添加了一个监听 
addListenerError添加了错误的监听 
removeListenerError移除监听出错 
其它
resize播放器尺寸发生改变 
controlBarShow:Boolean控制栏是否显示 
一个控制播放器的函数示例
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/2014/06/20-2.flv',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
</script>
<input type="button" name="button7" value="播放/暂停" onClick="CKobject.getObjectById('ckplayer_a1').playOrPause();" />

CKobject.getObjectById是获取播放器ID的函数。

playOrPause()是控制播放器播放/暂停的api


控制(交互)播放器函数列表
函数名称功能说明flashhtml5
getType()判断播放器类型,true=HTML5播放器,false=flash播放器
videoPlay()播放视频
videoPause()暂停视频
playOrPause()播放/暂停视频切换
fastNext()快进
fastBack()快退
changeStatus(int)改变监听等级,=0则停止监听
getStatus()获取播放器当前各项属性,包括视频的宽高,时长,位置等信息 ,信息的具体值在下方列出。
videoSeek(int)跳转的秒数
changeVolume(int)改变音量(0-100)
frontAdPause(Boolean)暂停/继续播放前置广告 
frontAdUnload()跳过前置广告 
changeFace(Boolean)是否隐藏控制栏,true隐藏,false显示 
plugin()plugin(name: String, show: Boolean = true, w: int = -1, h: int = -1, x: int = -1, y: int = -1, index: int = -1)
控制插件(插件名称,是否显示,插件的宽,插件的高,插件的x坐标,插件的y坐标,插件的深度)
 
plugAttribute(String)获取插件属性,plugAttribute(插件名称),返回一个对象,包括
         {
         exist:是否存在该插件          
         x:x坐标
         y:y坐标
         width:宽
         height:高
         show:是否显示          
         }
 
videoClear()清除视频
newAddress()重新加载新视频,例:newAddress('{f->视频地址}{s->0}')
promptUnload()清除提示点 
changeFlashvars(String)动态改变flashvars的值,如changeFlashvars('{d->广告地址}') 
changeStyle(String,String)改变配置属性,changeStyle(属性名称,属性值) 
promptLoad()重新加载提示点,在此之前可以通过changeFlashvars改变提示点内容 
marqueeClose()关闭滚动文字广告 
marqueeLoad(true,String)改变滚动文字广告内容,marqueeLoad(true,'新内容') 
videoBrightness(int)设置亮度值,值的大小是 -255--255   0为中间值,向右为亮向左为暗。 
videoContrast(Number)设置对比度值,值的大小是 -255--255  127.5为中间值,向右对比鲜明向左对比偏暗。 
videoSaturation(int)设置饱和度值,值的大小是 -255--255   1为中间值,0为灰度值(即黑白相片)。 
videoSetHue(int)设置色相值,值的大小是 -255--255  0为中间值,向右向左一试便知。 
videoWAndH(int,int)按比例调节视频比例,videoWAndH(110,120),即把宽度增加到110%,高度增加到120% 
videoWHXY(int,int,int,int)调整视频长宽,坐标,videoWHXY(宽,高,x坐标,y坐标) 
formatUrl(String)替换网址,即把该网址和flashvars里的a值进行组装 
screenShot(style,x1,y1,x2,y2):Object

截图,style(字符类型:video=截取视频,all=截取播放器),x1,y1指左边和上方切掉的距离,x2,y2是右边和下方切掉的距离
例:screenShot("video",0,0,0,0)截取视频图片,
返回一个对象Object{BitmapData:位图,ByteArray:二进制}
下面演示了一个用JPGEncoder组件截图的简单示例关键代码
var imgObj:Object=ck.screenShot("video",0,0,0,0);
var encoderjpg:JPGEncoder = new JPGEncoder();
var bytes:ByteArray = encoderjpg.encode(imgObj.BitmapData);

该功能仅支持as3,不支持javascript

 

getStatus()返回的属性

属性类型说明
widthInt播放器宽
heightInt播放器高
vwidthInt视频展示的宽
vheightInt视频展示的高
awidthInt视频宽
aheightInt视频高
videoxInt视频在播放器中的x坐标
videoyInt视频在播放器中的y坐标
timeNumber当前播放时间
totalTimeNumber视频总时间
byteInt当前加载字节
totalBytesInt视频总字节
speedInt视频加载速度,默认是:字节/250毫秒
volumeInt当前音量
playBoolean是否播放
muteBoolean是否静音
bufferInt缓冲值
mouseArray鼠标位置
myflashvarsObjectflashvars值
myStyleObject配置参数的对象,包含风格等信息,语言包信息
myObjectObject自定义对象
controlBarShowBoolean控制栏是否显示状态
actionscript3.0-api
actionscript3.0-api介绍
actionscript3.0-api介绍

as3.0-api主要用于插件开发过程中和播放器进行交互。

插件的分类,安装,制作
插件的分类

插件共分成二大类

一:普通类,主要是图片插件,简单点说就是可以把任意多个图片放到播放器里的任意位置来增加界面美观。

二:交互类,swf格式的插件,可以对播放器进行操作,此类插件又分成二类

        1:操作类,监听播放器状态,控制播放器做出反应。

        2:发送视频流类,可以通过插件把视频流发送给播放器以制作适应更多视频格式的播放器。

插件的安装

第一步:style.swf改成style.zip,插件(图片或swf文件)制作好后直接拖进该压缩包里

第二步:然后在ckplayer.js(ckplayer.xml),或style.zip/style.xml中放入相应的插件代码即可,(你甚至可以把插件安装在language.xml,但不建议这样使用)

以下是官方自带的三个插件(右边开关灯,分享,调整大小)安装方法截图


以上是ckplayer.js中的安装代码

以上是ckplayer.xml中的安装代码,style.xml里安装方法相同

插件安装一共有7个值

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并且可交互时,默认调用的类所在的包名称,详细说明可以到帮助手册里查看,默认无

制作swf插件第一步,非常重要

当播放器加载了插件(swf格式)后,(如果插件等级>1,指定可以进行交互时),播放器需要向插件里发送一个(播放器)实例。所以插件在运行初始阶段就需要提供一个函数来接收播放器实例。代码如下:

var ck:Object;
function setAppObj(obj:Object):void{
    ck=obj;
}

当播放器判断插件里存在setAppObj函数时,就会向该函数发送自身(实例),上面的例子中,ck=播放器(ckplayer.swf)。

一个简单的监听/删除监听的示例

假设插件的名称为:demo.swf

var ck:Object;
function setAppObj(obj:Object):void{
    ck=obj;
    ck.addListener("demo.swf","play",playHandler);
}
function playHandler():void{
    trace("播放了");
    //删除监听
    ck.removeListener("demo.swf","play",playHandler);
}

 addListener(插件名称,监听的属性,返回的函数);

actionscript-api
一个简单的监听/删除监听的示例

假设插件的名称为:demo.swf

var ck:Object;
function setAppObj(obj:Object):void{
    ck=obj;
    ck.addListener("demo.swf","play",playHandler);
}
function playHandler():void{
    trace("播放了");
    //删除监听
    ck.removeListener("demo.swf","play",playHandler);
}

 addListener(插件名称,监听的属性,返回的函数);

监听属性列表
属性功能说明flashhtml5
加载部分
plugLoadError:String插件加载失败:插件名称 
前置广告部分
frontAdContinue前置广告运行中 
frontAdPause前置广告暂停 
frontAdNext开始加载下一个广告 
frontAdEnd前置广告播放结束 
frontAdMuted:Boolean前置广告是否有声音:true/false 
frontAdError:String前置广告加载失败:加载失败的广告地址 
frontAdStart:String前置广告加载成功并开始播放:广告地址 
frontAdSkip跳过前置广告 
视频部分
newVideo开始建立一个新的视频播放程序 
videoLoad开始分析视频加载方式 
error视频加载失败
sendNetStream接收到视频流,说明视频加载成功,随时可以播放
loadedmetadata分析出视频元数据信息
ended视频播放结束
totaltime:Number视频总时间:秒,精确到小数点后三位
time:Number视频已播放时间:秒,精确到小数点后三位
totalbytes:Number视频总大小:字节
bytes:Number已加载字节
loadComplete视频加载结束
speed:Number视频单位时间内加载的字节数 
buffer:int缓冲百分比:0-100,接收到100时说明本次缓冲结束 
bounceTime:Number鼠标在进度条上松开时的时间点 
play播放
pause暂停
paused:Boolean是否暂停:true/false
seeking:Number跳转的时间:秒
fastNext快进 
fastBack快退 
videoClear视频被清除 
muted:Boolean是否静音:true/false 
volumechange:int改变了音量:0-100 
视频画面处理
coordinateChange:Array视频区域被改变,比如隐藏/显示控制栏,全屏/退出全屏时都会触发,返回一个数组[x,y,width,height] 
brightnessChange:int改变了亮度值,值的大小是 -255--255   0为中间值 
contrastChange:int改变了对比度值,值的大小是 -255--255  127.5为中间值 
saturationChange:int改变了饱和度值,值的大小是 -255--255,1为中间值,0为灰度值 
sethueChange:int改变了色相值,值的大小是 -255--255  0为中间值 
文字广告部分
changeMarquee文字广告内容被改变 
marqueeError文字广告加载出错 
marqueeLoaded文字广告加载成功 
marqueeClose文字广告关闭 
播放器交互
myObjectChange:Object自定义的对象发生改变 
flashvarsChange:Objectflashvars对象发生改变 
styleChange配置参数发生改变 
addListenerReplace添加了一个监听 
addListenerError添加了错误的监听 
removeListenerError移除监听出错 
其它
resize播放器尺寸发生改变 
controlBarShow:Boolean控制栏是否显示 
一个简单的控制播放器的示例
var ck:Object;
function setAppObj(obj:Object):void{
    ck=obj;
    ck.playOrPause();
}

 playOrPause()控制播放器暂停和播放的切换

控制(交互)播放器函数列表
函数名称功能说明flashhtml5
getType()判断播放器类型,true=HTML5播放器,false=flash播放器
videoPlay()播放视频
videoPause()暂停视频
playOrPause()播放/暂停视频切换
fastNext()快进
fastBack()快退
changeStatus(int)改变监听等级,=0则停止监听
getStatus()获取播放器当前各项属性,包括视频的宽高,时长,位置等信息 ,信息的具体值在下方列出。
videoSeek(int)跳转的秒数
changeVolume(int)改变音量(0-100)
frontAdPause(Boolean)暂停/继续播放前置广告 
frontAdUnload()跳过前置广告 
changeFace(Boolean)是否隐藏控制栏,true隐藏,false显示 
plugin()plugin(name: String, show: Boolean = true, w: int = -1, h: int = -1, x: int = -1, y: int = -1, index: int = -1)
控制插件(插件名称,是否显示,插件的宽,插件的高,插件的x坐标,插件的y坐标,插件的深度)
 
plugAttribute(String)获取插件属性,plugAttribute(插件名称),返回一个对象,包括
         {
         exist:是否存在该插件          
         x:x坐标
         y:y坐标
         width:宽
         height:高
         show:是否显示          
         }
 
videoClear()清除视频
newAddress()重新加载新视频,例:newAddress('{f->视频地址}{s->0}')
promptUnload()清除提示点 
changeFlashvars(String)动态改变flashvars的值,如changeFlashvars('{d->广告地址}') 
changeStyle(String,String)改变配置属性,changeStyle(属性名称,属性值) 
promptLoad()重新加载提示点,在此之前可以通过changeFlashvars改变提示点内容 
marqueeClose()关闭滚动文字广告 
marqueeLoad(true,String)改变滚动文字广告内容,marqueeLoad(true,'新内容') 
videoBrightness(int)设置亮度值,值的大小是 -255--255   0为中间值,向右为亮向左为暗。 
videoContrast(Number)设置对比度值,值的大小是 -255--255  127.5为中间值,向右对比鲜明向左对比偏暗。 
videoSaturation(int)设置饱和度值,值的大小是 -255--255   1为中间值,0为灰度值(即黑白相片)。 
videoSetHue(int)设置色相值,值的大小是 -255--255  0为中间值,向右向左一试便知。 
videoWAndH(int,int)按比例调节视频比例,videoWAndH(110,120),即把宽度增加到110%,高度增加到120% 
videoWHXY(int,int,int,int)调整视频长宽,坐标,videoWHXY(宽,高,x坐标,y坐标) 
formatUrl(String)替换网址,即把该网址和flashvars里的a值进行组装 
screenShot(style,x1,y1,x2,y2):Object

截图,style(字符类型:video=截取视频,all=截取播放器),x1,y1指左边和上方切掉的距离,x2,y2是右边和下方切掉的距离
例:screenShot("video",0,0,0,0)截取视频图片,
返回一个对象Object{BitmapData:位图,ByteArray:二进制}
下面演示了一个用JPGEncoder组件截图的简单示例关键代码
var imgObj:Object=ck.screenShot("video",0,0,0,0);
var encoderjpg:JPGEncoder = new JPGEncoder();
var bytes:ByteArray = encoderjpg.encode(imgObj.BitmapData);

该功能仅支持as3,不支持javascript

 

getStatus()返回的属性

属性类型说明
widthInt播放器宽
heightInt播放器高
vwidthInt视频展示的宽
vheightInt视频展示的高
awidthInt视频宽
aheightInt视频高
videoxInt视频在播放器中的x坐标
videoyInt视频在播放器中的y坐标
timeNumber当前播放时间
totalTimeNumber视频总时间
byteInt当前加载字节
totalBytesInt视频总字节
speedInt视频加载速度,默认是:字节/250毫秒
volumeInt当前音量
playBoolean是否播放
muteBoolean是否静音
bufferInt缓冲值
mouseArray鼠标位置
myflashvarsObjectflashvars值
myStyleObject配置参数的对象,包含风格等信息,语言包信息
myObjectObject自定义对象
controlBarShowBoolean控制栏是否显示状态
当采用插件形式发送视频地址(即flashvars里s=3)时,所用到的函数
函数名称功能说明
loadAddress(String,String,String)向播放器传递视频地址数组,例:('1.flv|2.flv','30|32','2000|2600')
分别表示:视频地址列表,每段的时间长度列表,每段的文件大小
videoError()通知播放器加载失败了
当使用插件发送视频流(即flashvars里s=4)时,所用到的交互函数
函数名称功能说明
ready()向播放器发送通知,告知此视频流已准备好播放
eSendNs()接收播放器的通知,即当播放器已准备好接受视频流时会向调用该插件的eSendNs()函数,这个函数和上面的函数必需配套使用才能保证播放器和插件都准备好了,详细的可以参考m3u8插件里的代码
sendNetStream(streame,width,height)向播放器发送流,宽,高
changePM()通知播放器进度按钮可以跟着时间走动
changeBuffer(int)通知播放器当前缓冲百分比,当播放器接爱到100时会认为缓冲完成
videoEnd()通知播放器已播放结束
videoError()通知播放器加载/播放失败
changeClock(Number)向播放器发送当前播放时间
changeTotalTime(Number)向播放器发送总时间
changeLoad(int)向播放器发送已加载字节
changeTotalBytes(int)向播放器发送总字节
ePlay()接收播放器发送播放命令
ePause()接收播放器发送暂停命令
eSeek(Number)接收播放器发送跳转命令
eVolume(int)接收播放器发送音量改变命令
eClear()接收播放器发送清除视频命令
noticeClear()当清除完视频后需向播放器发送一个确认命令,告诉播放器视频已清除完成,可以进行下一步动作
视频处理&服务器配置
IIS设置支持flv,f4v,mp4,ogv,webm,以及mp4视频随意拖动和预览
IIS设置支持flv,f4v,mp4,ogv,webm

以配置支持flv格式为例

在iis的Internet信息服务(2003)点击右键 或指定的网站上(高版本的iis)右键选择“属性”,在弹出的窗口中选择“HTTP头”选项卡,然后点击“MIME类型”,在弹出的窗口中点击“新建”,在扩展名和MIME类型的文本框中分别填入下图所示的内容:

20120827132753_81141.jpg

flv格式是加入关联扩展名:.flv,内容类型:application/octet-stream
f4v格式是扩展名:.f4v,内容类型:application/octet-stream
mp4格式是扩展名:.mp4,内容类型:video/mp4
ogv格式是扩展名:.ogv ,内容类型:video/ogg
webm格式是扩展名:.webm,内容类型:video/webm
确定以后,服务器就可以支持FLV,f4v,mp4视频播放了,如果依然不可以的话,可以尝试重新启动IIS!

 

IIS环境下支持mp4视频随意拖动和预览

功能介绍:支持MP4视频任意拖动(即拖动进度到没有下载的部分直接可以播放),支持MP4视频边下载边播放

适用于服务windows系统 IIS5.16.0以及更高

1、下载IIS专用的DLL扩展模块。

iis5-6:http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Internet-Information-Services-IIS-Version2

iis7:http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Internet-Information-Services-IIS7-Version2

2、以iis5-6为例,解压mod_h264_streaming.dll至服务器上的目录
    2.1如果您的IIS配置了ISAPI的PHP环境,推荐把mod_h264_streaming.dll放在php5isapi.dll所在目录,如c:php;
    2.2(这个权限很重要,不然你怎么都配置不成功的,如果你网站文件有指定权限用户,也得把所指下的用户加进去并设置为读取和运行)如果您把mod_h264_streaming.dll放在其他目录,请配置该文件所在目录权限为:Administrator/完全控制;NETWORK SERVICE/读取和运行;SYSTEM/完全控制;USER/读取和运行。

3、打开IIS管理器。
    3.1在“web服务器扩展”下:添加新的扩展-扩展名为ModH264Streaming-可执行文件指定为mod_h264_streaming.dll,并设置为“允许”。
    3.2在想要开通http流功能的主机上右键-属性-主目录-配置-添加

扩展名为“.mp4”,可执行文件为mod_h264_streaming.dll。

[感谢网友红土地提供本教程]

windows环境中apache和nginx中配置支持视频任意拖动
apache+Windows配置flv,mp4视频实时拖动

第一步,下载mod_flvx.so和mod_h264_streaming.so并放到apache目录下的modules文件夹下,下载地址:

http://www.panshy.com/downloads/201503/down-196.html

下载解压得到下面二个文件:

mod_flvx.so

mod_h264_streaming.so

把这两个文件放到,apache的modules目录中,然后查找httpd.conf这个文件,打开编辑,找到类似这样的LoadModule在他们的下面加上以下两段

LoadModule flvx_module modules/mod_flvx.so
AddHandler flv-stream .flv

LoadModule h264_streaming_module modules/mod_h264_streaming.so
AddHandler h264-streaming.extensions .mp4

第三步,重启apache服务

nginx+Windows配置flv,mp4视频流任意拖动

nginx官网地址(最新下载地址):http://nginx.org/en/download.html
下载nginx/Windows版本,本文发布时最新版本是:nginx/Windows-1.3.11

下载解压后,把所有文件放到你的任意盘的任意地方
如果你之前安装过iis,那么只需要把iis里的网站关掉就可以了(当然也可以直接删除IIS),如果不关掉的话就要注意配置nginx的时候的使用端口不能和iis的冲突,为了方便说明,请关掉iis

下面配置nginx
找到conf/nginx.conf文件(找不到说明你没开显示文件后缀名的功能),用记事本打开
在server段,不知道server段在哪?那就找
        location / {
            root   html;
            index  index.html index.htm;
        }
在该段第三行的下方添加上如下代码

        location ~ .flv {
            flv;
        }
        location ~ .mp4 {
            mp4;
        }

最后的效果应该如下图(部份,只截了改动的部份)

20130321152133_37452.jpg

视频处理
视频转码成mp4格式,添加关键帧,添加元数据,把元数据放在第一帧

作者测试是在windows下使用,所以下载的页面地址是: http://ffmpeg.zeranoe.com/builds/
点击页面上的Download FFmpeg git-738ebb4 64-bit Static(我是64位的),如果你是32位点击 Download FFmpeg git-738ebb4 32-bit Static
下载下来解压缩后我把文件夹改成了ffmpeg放在D盘下面
运行三个文件:
D:ffmpeg/bin/ffmpeg.exe
D:ffmpeg/bin/ffplay.exe
D:ffmpeg/bin/ffprobe.exe
这就成功安装了


下面举二个简单的例子
首先,搞一个视频文件放在D盘根目录下,主要为了省事,比如我放的是:D:/1.flv
在开始->运行里输入cmd,弹出命令窗口
按下面的命令进行操作
输入d:按回车
输入 cd ffmpeg/bin回车
这样就进入了ffmpeg的目录了,
1:测试视频截图的功能
复制如下命令,在命令行里点击鼠标右键选择粘贴
ffmpeg -i d:/1.flv -y -f  image2 -t 0.001 -s 720x576 d:/1.jpg
看看D盘下是不是生成了一个1.jpg的图片,是的话就成功了,不是你就认真检查下吧,看看路径是不是正确
2:测试d:/1.flv转成d:/1.mp4
同样,复制下面的命令,在命令窗口里点击鼠标右键选择粘贴

ffmpeg.exe -i "d:1.flv" -y  -metadata title="这是视频标题"  -metadata comment="这是视频信息!"   -c:v libx264  -preset superfast -x264opts keyint=25  -r 15 -b:v 500k -c:a aac -strict experimental -ar 44100 -ac 2  -b:a 64k -vf  "movie=a.png[watermark];scale=1364x768[scale];[scale][watermark] overlay=30:30[out]" -f  mp4 "d:2.mp4"

等命令执行完成后看看D盘下是不是有个mp4了,有了就说明成功了。

参数说明:

movie=是水印
-b:v 后的500k是码率
scale=后是分辩率
keyint=25 是关键帧 表示每25帧会有一个关键帧


如果你的视频只是元数据信息不在第一帧,下面介绍另一种mp4把元数据信息转到视频第一帧

首先需要下载一个qt-faststart
下载地址:http://www.ckplayer.com/down/qt-faststart.rar
下载下来解压得到qt-faststart.exe放到d:ffmpeg/bin/下面
运行命令:qt-faststart.exe d:/1.mp4 d:/2.mp4
最后出来的这个2.mp4就是成功的了。可以边下载边播放
关于详细的参数设置,请自行网上搜索了解或者看使用说明

给flv添加关键帧

yamdi官方下载地址 http://yamdi.sourceforge.net
打不开的话就自行到别的网站找一个下载吧,或者加入ckplayer群,群共享里也有下载
下解下来解压得到一个单独的文件:yamdi.exe


第一步,把这个文件保存在一个安全的空间很大的地方(因为这地方要放视频文件,所以要有足够的空间)

第二步,运行这个文件,运行是看到一个黑框闪一下就关了,这就可以了

第三步,找一个flv文件放在和yamdi.exe同目录下

第四步,在运行里输入cmd然后回车

第五步,执行下面命令就能成功的把1.flv加上关键帧,生成一个新的2.flv,新的flv就是包含关键帧的了

41031395632890.jpg

支持从未下载的时间点开始播放(支持随意拖动),需要做哪些设置

要支持该功能,需要考虑的因素包括:视频文件,服务器,播放器设置

一:视频文件要存在关键时间点。这是标准的格式所决定的。不管是flv还是mp4都需要,举一个简单的示例,比如视频文件名1.flv里存在的关键时间点和关键帧数据如下

1,5,10,15,20

1000,1500,2000,2500,3000

上面是一一对应的,即有一个关键时间点就会有一个关键帧,这些是视频本身的信息。要转换视频时就需要把这些信息写入进去,现在的很多软件有这个功能,可以查看帮助手册里关于给视频添加关键帧的相关部分


二:服务器设置,因为视频从未加载的地方进行播放,播放器会向服务器发送请求如1.flv?start=10这样的地址,如果服务器能够处理这样的地址则会从当前的第10秒开始加载,关于这里的设置可以查看帮助手册里的相关说明


三:播放器里的flashvars里的h值需要设置,比如设置成4或3即可,关于这个参数的详细说明帮助手册里也有。另外还要注意的是q值,q值在不设置的情况下是start。如果你有特殊设置,需要注意这里

服务器自动化智能转码软件
服务器自动化智能转码软件

本文推荐的这款软件是针对流媒体服务器视频进行自动化处理的优秀软件。
软件名称:91flv视频转码软件
主要核心功能:
1、解决网页播放mp4视频文件,但播放起来只有声音,没有图像画面。
2、解决flv、mp4文件上传到服务器后,flv无法拖动播放,只能预下载部分才能拖动,如果是mp4文件则要等到视频文件下载完成后才能播放,在未下载完成时候播放器处于黑乎乎状态。这两种体验相当不好。
3、一流的视频压缩率,在保持视频原画质基础上视频文件缩小70%以上,节省服务器硬盘和宽带占用。
3、免去手动转码和截图的烦恼,网站的缩略图如果需要手工截取,相当麻烦。转码软件采用自动检测、多任务执行、多格式图片输出,用于网站的各个地方调用,可设置秒数生成动态图片,让网站界面妙趣横生。
4、完全配合ckplayer多清晰度切换功能,自动生成txt和xml两种多码率播放列表文本。
5、针对ckplayer分段加载的优势,大视频切片处理,缓解服务器宽带压力。
6、支持m3u8视频流加密功能,保护视频不被别人修改编辑。
7、自动批量添加水印。
9、自动批量插入视频广告片段到视频文件里面,视频传到哪里广告就传到哪里。

免费版下载地址:http://91flv.com/convert/3/407.html
客服QQ:250093148

 

常见问题
视频播放问题
视频有声音,无画面,或有画面,无声音

这是视频转码格式不正确导致的,正确的视频格式应该是h.264编码。音频编码是AAC

视频要等加载完才能播放,而不是边加载边播放

这是因为视频的元数据信息不在第一帧所致。

元数据是指保存视频属性的一组参数,比如视频的宽度,高度,时间长,总字节,关键帧等信息。

因为网页上的视频播放器播放视频是以流的形式加载(即没办法直接加载视频结尾的数据,只能从前向后加载),所以播放器必需要读取到元数据信息才可以进行播放。具体的解析办法可参考:视频处理

视频能在迅雷等本地播放器里播放但不能在ckplayer里播放

因为本地播放器都集成了各种解码器,而且对视频的元数据信息没有要求在第一帧。而网页播放器对视频的要求必需是h.264编码的。如果你是其它编码,在本地有相应的解码器,当然可以播放,但在网页上就无法使用了。

用浏览器自带的开发者工具检测视频出错原因,适合ie9-ie11及以上,firefox,chrome等浏览器

在浏览器当前播放页面按F12可以调用出开发者工具,只要稍微了解一下,就能体会到这个工具的实用性。借助他可以分析出各种各样的问题。做为网站开发者,强烈建议了解这个工具。

下面我们以视频加载失败为例进行实际测试,其它的如js出错也都可以测试出来。

ie的以ie11为例

2.jpg


firefox为例

1.jpg

chrome为例

chrome.jpg

视频加载失败的可能原因

一:如果你是本地视频地址,即服务器是你的,视频是你的,需要检查服务器是否支持该格式的视频,检查的方法是把视频地址放在地址栏里直接打开看看能否下载。如果不能下载,说明你的服务器不支持该格式的视频,可以参考帮助手册里的“视频和服务器配置”栏目了解帮助。

二:视频可以下载,但不能播放,需要确认该视频格式是h.264的编码。

三:如果你是通过网址(包括xml格式的地址),需要检查你的安全策略文件,如果你的根目录下不存在策略文件,请自行放置一个,安全策略文件示例,官方的下载包里提供了一个,名称是:crossdomain.xml,文件名称不能更改,详细的了解可以自己百度搜索。最安全的方法是用浏览器自带的开发者工具进行测试。关于开发者工具的使用方法,请参考:http://www.ckplayer.com/tool/#p_9_19_69

mp4视频在安卓上能够播放,但在苹果上不能播放

引起这个问题的原因可能存在如下方面:

1:iis安装了mod_h264_streaming.dll组件,有时这个组件会导致这个问题的出现,可以先试着禁用到

2:服务器安装了安全狗软件,先关掉(或卸载掉)后试试

3:检查防火墙,可以先关闭试试

视频没有播放结束,播放就停止了

造成这个的原因是由于视频本身存在问题。在转码过程中出现了错误导致提前结束。解决的办法是试着重新转码。可以了解教程里的软件:ffmpeg的使用方法。

中文名称的路径/视频名称无法播放

首先,ckplayer是支持中文播放的。

如果不能播放可以从二方面入手排查。

一是可以设置你的服务器编码为gbk或gb2312,具体设置方法请自行搜索。

二是可以使用网址形式的调用方式,即调用时flashvars里s=1的时候的调用方式调用。

三是设置flashvars里code=gbk2312,则播放器默认以gbk2312编码对地址地行编码

支持随意拖动的情况下不能按指定的秒数进行跳转

视频的跳转(seek)是根据关键帧进行跳转的,并不是按指定的秒数进行跳转,简单点说,一个视频关键帧列表可能是如下值

0秒,10秒,20秒,30秒

在这些秒数有关键帧,而其它秒是没有关键帧的

此时当跳转到15秒时,视频(播放器)会自动搜索最近的一个关键帧进行跳转,如10秒的关键帧,所以如果想要准确的跳转,关键帧的设置就要尽量小。正常转码软件里会有这方面的配置。

系统错误
Error #2039 Failed to load ckplayer/ckplayer.swf/style.xml

压缩风格包的时候应该选择所有文件进行打包,而不是选择总文件夹(style/)进行打包。这个错误是说播放器没有找到style.swf的根目录里的style.xml文件,

Error #2036 Failed to load language.xml

加载语言句文件出错,请自行检查播放器目录中是否存在该文件

其它问题
为什么js不能控制播放器全屏

这是因为adobe的安全机制确定的。任何在不经过用户同意(点击)的情况下,播放器不能全屏。

传递的flashvars对象中没有my_url

在分享框里提示时,说明你调用播放器时的flashvars里没有my_url参数及值。

在使用分享功能,标准的调用代码应该包含my_url,如:

var flashvars={
  f:'http://movie.ks.js.cn/flv/other/2014/06/20-2.flv',
  my_url:encodeURIComponent(window.location.href)
};
var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};
var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);


浏览器不兼容

播放器在有些浏览器上不能加载,需要注意检查调用代码中的var flashvars={}对象变量。这里正确的应该是各项之间用逗号隔开,但是最后一项不能有逗号,不然在有些浏览器上会认为这是错误的方法

正确的应该是如

var flashvars={
    a:'',
    b:'',
    c:''
}

错误的可能如下

var fashvars={
    a:'',
    b:'',
    c:'',
}

 还有一种情况也会导致浏览器不兼容,就是直接注释了function ckcpt() {}函数,正确的去掉插件方法应该是只注释三个插件的三行,而不是注释整个函数。

修改右键
兑换/购买修改右键版权名称的服务
用CK币换取修改右键版权名称的服务

你可以使用ckplayer官方论坛的CK币换取修改右键版权名称的服务,价格是5000CK币,并且该活动只针对个人网站(以备案信息为准)有效,详细的规则请到论坛查看。

购买修改右键版权名称的服务

选择使用人民币购买修改右键版权名称的服务的价格是:580元,没有发票,谢绝还价。

版权名称修改后可以永久使用,不受升级限制(即播放器升级后,你的版权名称也一样有效)。

版权名称不能使用容易引起共用的名称,比如:“版权所有”,“player”等等类似的。但可以使用如“**版权所有”,“**player”等

支付宝账号:webmaster@mypcd.com.cn,实名全名是:陈建

财富通账号:14926108

如需使用网银支付,请联系作者

支付完成后,请加作者的QQ:14926108

 

修改/增加右键菜单的方法
注册码的使用方法/修改右键版权名称的方法

当获得一串注册码后,打开ckplayer.js和ckplayer.xml

分别修改如下参数:

myweb: escape('d6dac5d523s300e7d6f60bbec822b2c1,版权名称,http://链接地址,版本号如v0.1'),
<myweb>d6dac5d523s300e7d6f60bbec822b2c1,版权名称,http://链接地址,版本号如v0.1</myweb>

注意,版权名称是你提供给作者的版权名称,不可以随意更改。

增加右键菜单

为播放器增加新的菜单,前提是你是商业用户,购买过修改右键版权的服务,有注册码。

打开ckplayer.js或ckplayer.xml,以ckplayer.js为例,找到myweb:''这一行,在下面新加一个参数

myright:escape(''),

上面这一行就是用来定义新菜单的内容的。

菜单内容的功能主要分四部分:

一:普通的链接

二:普通的说明(显示为灰色)

三:操作播放器动作(比如播放,暂停)功能

四:复制功能(可以对flashvars里的内容进行复制)

myright里的参数个数必需为偶数。可以留空。

下面进行举例说明:

一:添加一个普通的链接

myright:escape('增加一个链接,http://www.ckplayer.com'),

二:在上面的基础上添加一个灰色说明文字

myright:escape('增加一个链接,http://www.ckplayer.com,灰色说明文字,'),

三:在上面的基础上添加一个控制播放器播放/暂停切换的功能

myright:escape('增加一个链接,http://www.ckplayer.com,灰色说明文字,,播放/暂停,[playorpause]'),

其它的控制功能:

(说明,右键菜单的文字要注意不能使用flashplayer自用的一些关键字,如:快进,播放,暂停,play,pause之类的)

显示/隐藏控制栏:[changeface]

全屏/取消全屏:[videofull]

播放视频:[videoplay]

暂停视频:[videopause]

快进:[fastnext](说明:该功能建议不要使用“快进”二字。因为快进是flashplayer自用的)

快退:[fastback]

增加音量:[addvolume]

减少音量:[redvolume]

四:在上面的基础上添加一个可以复制flashvars里的内容的功能

myright:escape('增加一个链接,http://www.ckplayer.com,灰色说明文字,,播放/暂停,[playorpause],复制f值和a值,[copy_f]'),
copy_f:escape('复制了[f]和[a]'),

 上面的代码就可以复制flashvars里的f和a参数的值

加密风格文件style.swf
给风格文件(style.swf)加密

该功能只有购买过右键版权的用户可以使用,费用是480元人民币,永久有效,不受升级限制。付款方式同“修改右键版权信息”。

该功能的作用是把你的风格文件style.swf进行加密,别人无法打开里面的文件进行修改。确保你的插件独享。

Powered by ckplayer.com  
Copyright©ckplayer,2011-2015