flv f4v mp4 视频播放器代码

flv f4v mp4 视频播放器代码

 

ckplayer是一款在网页上播放视频的免费的播放器，功能强大，体积小巧，跨平台，使用起来随心所欲。
播放器主要以adobe的flash（所使用的版本是CS5）平台开发，所以在支持flash插件的平台和浏览器上都可以使用，而无需下载其它插件，如果你需要修改完整版里提供的相关的flash源文件，请使用adobe的flash cs5以上版本打开源文件修改。
ckplayer同时也支持html5的视频播放，即同时可以在Ipad，Iphone等IOS平台上播放视频，并且只需简单代码就可以使用，无需了解html5插入视频的方法。
软件在对各平台的兼容性方面适应性比较强，比如你可以设置在Android平台或wp平台上在用户已安装flash插件的时候使用flash播放器，在没有装flash插件的情况下使用html5播放器。
ckplayer是一种前台使用的程序，不涉及到服务器程序（asp,php,jsp,.net），也不涉及到对服务器的操作(即不需要写入权限)，所以不存在安全方面的问题。同时可以集成在任何程序中，包括asp,php,jsp,.net以及其它支持插入flash的环境中。

功能列表：
兼容SWF/HTML5跨平台播放
支持流行视频格式flv，f4v，mp4，
支持html5格式m3u8,webm,ogg theora,mp4
支持RTMP协议下的视频直播和回放
支持前置广告（swf,图片,视频）
支持前置广告多个随机/顺序播放
支持暂停广告(swf,图片)多个随机播放
支持缓冲广告，小窗口广告，滚动文字广告
支持多达6种形式的视频地址调用方式
支持多段视频无缝播放，支持多集连播
支持视频预览功能
自定义提示点功能，跳过片头片尾功能
bshare完美视频分享功能
调节视频尺寸，亮度，对比度，色相，饱和度功能
支持播放结束显示精彩视频推荐
支持自定义播放器界面，无需了解程序，即可自己制作出风格
支持js和播放器的互动操作，可以任意控制播放器的动作，比如暂停/播放
丰富的api接口,快速打造功能强大的插件

 

安装方法及环境需求

安装很简单，只要你有网站的空间或服务器，直接把ckplayer文件夹（该目录下应该是包括ckplayer.swf的，而不是包括index.htm的）放在你网站根目录下，使用下面介绍的方法调用，请注意，跟你网站使用的什么环境和程序语言没有任何关系。就相当于一个js文件一样使用即可。

 

本教程涉及到以下各点，点击对应标题页面将直接滑动到相应内容：

• 1：文件选择方案（根据不同的需求选择部份或全部文件）
• 2：调用方式一：embed简单调用方式，只能调用Flash播放器
• 3：调用方式二(1)：使用ckplayer提供的js函数CKobject，兼容Flash+HTML5（推荐）
• 4：调用方式二(2)：使用js函数CKobject只调用Flash播放器（推荐）
• 5：调用方式二(3)：使用js函数CKobject只调用HTML5播放器（推荐）
• 6：HTML5播放器对视频格式的要求
• 7：RTMP视频的调用及相关说明
• 8：调用方式三：使用adobe提供的js函数swfobject（不推荐）
• 9：flashvars里各参数的功能介绍
• 10：调用视频地址方式一：普通调用
• 11：调用视频地址方式二：网址形式调用
• 12：调用视频地址方式三：xml格式调用
• 13：调用视频地址方式四：用flash插件调用

 

1

文件选择方案（根据不同的需求选择部份或全部文件）

 

方案一：如果只需要调用一个视频播放器播放视频，不需要分享功能，开关灯功能，调节亮度功能，也不需要交互功能，也不需要html5的功能，那么你的ckplayer文件夹里只需要保留以下四个文件即可

 方案二：如果你需要交互（或需要html5下的视频播放），但是不需要分享，可以只保留以下文件

方案三：保留全部文件，可以使用全部功能

 

2

调用方式一：embed简单调用方式，只能调用Flash播放器

 

我们先看下面这段引用播放器的代码，你会发现，这就跟调用普通的swf文件是一样的，唯一的不同点就是多了一个flashvars参数。

<embed src="http://www.ckplayer.com/ckplayer6.1/ckplayer.swf" flashvars="f=http://movie.ks.js.cn/flv/other/01.mp4" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" wmode="transparent" type="application/x-shockwave-flash"></embed>

关于该调用方式的说明和相关知识点：   

embed:是调用浏览器插件的标志,并不是只用来调用swf文件，还包括其它的一些插件，但我们这里是用来调用swf文件的,在html中，很多标志是需要成对出现的，比如这里<embed></embed>，有开头的标志，就要有结束的标志。   

src:表示播放器的路径

flashvars:表示向播放器里插入的变量名称和值，以上的代码，表示向播放器里传递了一个f变量，值是http://movie.ks.js.cn/flv/other/01.mp4，播放器会读取到这个变量和值进行处理，flashvars不仅仅只能传递一个变量，而是可以传递多个变量的，各个变量用&符号相分隔，比如 flashvars="a=1&s=2&x=" 向播放器里传递了三个值，其中x的值为空。

quality:该值是设置播放器的质量和速度之间的选择用的，可以直接忽略，不看，用默认的就行，下面列出该参数各种值的意思，仅供了解 

Low 速度优于美观，而且不应用反锯齿。

Autolow 刚开始着重于速度，但当需要时随时提升美观。

Autohigh 同时着重播放速度和美观，但需要时则牺牲美观来保证播放速度。

Medium 应用一些反锯齿而不平滑位图。它质量高于low设置而低于high设置。

High 美观优于播放速度，而且一直应用反锯齿。如果影片不包含动画，位图会被平滑化;而如果影片包含动画，位图将不变平滑。

Best 提供最好的显示质量而不考虑播放速度。所有输出都应用反锯齿及所有位图都被平滑化。

width:定义播放器的宽，单位是像素

height:定义播放器的高

align:这是定义swf中的控制面版对齐方式，无视这个参数，用默认即可

allowScriptAccess:这是一个很重要的参数，因为这里可以设置允许或禁止swf文件和页面中的js交互，各种值的意思如下： 

always 允许随时执行脚本操作。

never 禁止所有脚本执行操作。
samedomain 只有在 Flash 应用程序来自与 HTML 页相同的域时才允许执行脚本操作。

很多分享出去的视频，你会发现无法点击广告或精彩视频推荐或分享到微博的按钮，都是因为这里的值设置成了never或samedomain，禁止了交互功能，当然这也是为安全考虑

allowFullscreen:是否允许播放器全屏，设置成false时，点击全屏按钮也不能全屏

type:插件的类型，在浏览器中每种插件都有其固定的名称

wmode:是控制播放器是否是透明背景的参数，在设置成wmode="transparent"时不仅仅可以使之背景透明，而且还可以使得该播放器位于其它页面元素之下。不会遮挡到其它元素。该参数在有些情况下很有用处。

 

3

调用方式二(1)：使用ckplayer提供的js函数CKobject，兼容Flash+HTML5（推荐）

CKobject函数是ckplayer提供的一个调用播放器的函数，可以很好的兼容集成Flash播放器和HTML5播放器。

下面是一个简单的调用播放器的代码示例，注意在调用前要引入ckplayer.js，下面为已引入的调用代码：

<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',
  p:1
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
 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,params)
</script>

上面的代码每一行的意思以及每一个参数的意思解释如下：

1：<div id="a1"></div>

播放容器，即播放器最后将动态的在这里进行加载，容器的id="a1"

2：<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>

这一行是引入播放器的js配置文件，因为Ckobject函数就是写在这个文件里，要注意src的路径要正确，不然则调用错误

3：<script type="text/javascript">

这是html里执行javascript（缩写：js）代码的标志，需要跟</script>（代码第14行已有）成对出现

4-8：var flashvars={};

这是js里定义对象的代码。这里定义了一个对象，这个对象是用来保存设置播放器里初始化时相关的配置，比如f值是定义(使用flash播放器时)视频地址的。c值是定义播放器调用ckplayer/ckplayer.js中的ckstyle()函数做为风格配置参数，p:1是定义该视频默认直接播放。如果是p:0则视频默认暂停

9：var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};

该参数只有Flash播放器用到，这里也定义了一个对象，是设置播放器相关属性的。bgcolor是播放器的背景颜色，allowFullScreen是是否允许全屏，allowScriptAccess是否允许播放器跟页面中的js进行交换，wmode是设置播放器是否透明

10：var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];

定义html5视频所用到的视频地址的一个数组，为了适应不同的浏览器和平台，建议该数组增加更多的视频格式。如官方首页设置的样式

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'];

上面的代码演示了调用三种视频格式的方法，分别调用了mp4,webm,ogg三种视频格式，当然还可以增加另外的视频格式如m3u8
要注意的是，html5方面调用视频地址时的格式，正常的是：视频地址->视频格式，比如当视频是mp4格式时，后面需要说明：video/mp4，如果是m3u8的可以直接放地址，不需要加上->video/m3u8

关于这个参数还有另外的一种调用方式是使用网址形式的调用。代码如下：

var video=['http://www.ckplayer.com/1.php?a=2->ajax/get/utf-8'];

上面的代码是指将从http://www.ckplayer.com/1.php?a=2这个地址读取视频地址传递给html5播放器使用，该页面地址的源代码里只需要输出一个正确的视频地址即可。不需要有其它内容，示例：

http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg

当然也可以地址前面加上相关的参数比如

{p->1}http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg

->后面的各个参数的意思如下：

ajax：使用无刷新读取网址形式调用视频地址

get：使用get方法传递参数，另外的还有一个post方法

utf-8：是该地址的网页编码是utf-8的，其它的还有如gb2312

11：CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video,params)

该行代码是开始调用播放器，一共9个参数，你也可以把最后一个参数去掉。
括号里面的参数的意思分别是
1、播放器swf文件路径，注意，该路径一定要正确
2、播放器id，不管最后页面上显示的是Flash播放器还是HTML5播放器，ID都是相同的
3、播放器宽度，可以设置成百分比形式
4、播放器高度，可以设置成百分比形式

5、优先使用值，默认false，优先使用Flash播放器，即在用户装了Flashplayer插件并且版本在11以上的情况下会调用Flash播放器播放，true=优先使用HTML5播放器。建议设置成false
6、Flash视频地址及初始化配置（上面定义的var flashvars={}）
7、HTML5所用到的视频地址（上面定义的var video={}）
8、当环境使用Flash播放器时的配置，该项可以省略，因为CKobject函数本身默认的就是上面的配置。

12：</script>

调用播放器结束

 

4

调用方式二(2)：使用js函数CKobject只调用Flash播放器（推荐）

注意在调用前要引入ckplayer.js，下面为已引入的调用代码：

<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',
  p:1
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>

上面的代码每一行的意思以及每一个参数的意思解释如下：

1：<div id="a1"></div>

播放容器，即播放器最后将动态的在这里进行加载，容器的id="a1"

2：<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>

这一行是引入播放器的js配置文件，因为Ckobject函数就是写在这个文件里，要注意src的路径要正确，不然则调用错误

3：<script type="text/javascript">

这是html里执行javascript（缩写：js）代码的标志，需要跟</script>（代码第14行已有）成对出现

4-8：var flashvars={};

这是js里定义对象的代码。这里定义了一个对象，这个对象是用来保存设置播放器里初始化时相关的配置，比如f值是定义视频地址的。c值是定义该播放器调用ckplayer/ckplayer.js中的ckstyle()函数做为风格配置参数，p:1是定义该视频默认直接播放。如果是p:0则视频默认暂停

9：var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};

这里也定义了一个对象，是设置播放器相关属性的。bgcolor是播放器的背景颜色，allowFullScreen是是否允许全屏，allowScriptAccess是否允许播放器跟页面中的js进行交换，wmode是设置播放器是否透明

10：CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars,params);

该行是调用swf播放器的代码
CKobject函数里embedSWF是调用swf播放器的，下面的embedHTML5是调用html5播放器的

该函数里默认有7个参数，分别对应的意思如下

1：swf播放器路径，请注意要填写正确的路径

2：播放器放置的容器，这里即上面的<div id="a1"></div>

3：播放器的id和name值，这里设置的是ckplayer_a1

4：播放器的宽

5：播放器的高

6：flashvars的值，该值是向播放器里传递视频地址之类参数的(对象)变量，在4-8行定义了该变量，这里只是引用

7：params，该参数即第9行定义的变量。

11：</script>

调用播放器结束

 

5

调用方式二(3)：使用js函数CKobject只调用HTML5播放器（推荐）

注意在调用前要引入ckplayer.js，下面为已引入的调用代码：

<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,
  i:'http://www.ckplayer.com/images/loadimg3.jpg'
 };
 var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
 var support=['iPad','iPhone','ios','android+false','msie10+false'];
 CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>

上面的代码每一行的意思以及每一个参数的意思解释如下：

1：<div id="video"><div id="a1"></div></div>

播放容器，即播放器最后将动态的在这里进行加载。

2：<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>

这一行是引入播放器的js配置文件，因为Ckobject函数就是写在这个文件里，要注意src的路径要正确，不然则调用错误

3：<script type="text/javascript">

这是html里执行javascript（缩写：js）代码的标志，需要跟</script>（代码第14行已有）成对出现

4-8：var flashvars={};

这是js里定义对象的代码。这里定义了一个对象，这个对象是用来保存设置播放器里初始化时相关的配置，在HTML5里该参数只有三个值可以使用：分别是

p：该值是控制播放器默认是否播放的，0=默认暂停，1=默认播放，2=默认不加载视频，用户点击后才会继续加载，当然该设置=1时并不能保证默认就能播放，因为在有些手机或IOS设备由于考虑到用户设置和手机默认的HTML5方面的设置。即使设置成1也需要等用户点击才会加载。

e：播放完成后的动作，0=调用js函数（默认是调用playerstop()），=1时是循环播放，=2或=3是暂停

9：var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];

定义html5视频所用到的视频地址的一个数组，为了适应不同的浏览器和平台，建议该数组增加更多的视频格式。如官方首页设置的样式

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'];

上面的代码演示了调用三种视频格式的方法，分别调用了mp4,webm,ogg三种视频格式，当然还可以增加另外的视频格式如m3u8
要注意的是，html5方面调用视频地址时的格式，正常的是：视频地址->视频格式，比如当视频是mp4格式时，后面需要说明：video/mp4，如果是m3u8的可以直接放地址，不需要加上->video/m3u8

关于这个参数还有另外的一种调用方式是使用网址形式的调用。代码如下：

var video=['http://www.ckplayer.com/1.php?a=2->ajax/get/utf-8'];

上面的代码是指将从http://www.ckplayer.com/1.php?a=2这个地址读取视频地址传递给html5播放器使用，该页面地址的源代码里只需要输出一个正确的视频地址即可。不需要有其它内容，示例：

http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg

当然也可以地址前面加上相关的参数比如

{p->1}http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg

->后面的各个参数的意思如下：

ajax：使用无刷新读取网址形式调用视频地址

get：使用get方法传递参数，另外的还有一个post方法

utf-8：是该地址的网页编码是utf-8的，其它的还有如gb2312

10：var support=['iPad', 'iPhone', 'ios'];

定义一个（数组）变量来设置在哪些平台或浏览器中使用html5播放器，以下列出了该数组可以定义的数值以及对应的平台

数组内容	作用
all	所有平台都使用htmll5
all+false	所有不支持flash的平台都使用html5
iPhone	iPhone
iPad	iPad
ios	ios终端
android	android终端或者uc浏览器
trident	IE内核
presto	opera内核
webKit(可加上版本号：如webKit5)	苹果、谷歌内核
gecko (可加上版本号：如gecko10)	火狐内核
mobile (可加上版本号：如webKit5)	移动终端
webApp	web应该程序
msie (可加上版本号：如msie10)	IE浏览器

使用方法举例

var support=['all'];所有的平台都使用html5

var support=['all+false'];//所有的不支持flash或没安装flash插件的平台上都使用html5

var support=['android+false','iPad'];//在iPad上使用html5，在android(安卓)上没有安装flash插件的情况下使用html5

11:CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
括号里面的参数的意思分别是
1、视频容器id
2、播放器id
3、宽度
4、高度
5、视频地址
6、相关设置
7、支持的平台

12：</script>

调用播放器结束

 

6

HTML5播放器对视频格式的要求

var video=[]，这是一个数组类型，里面可以放多个视频（格式）地址，这样设置的原因是因为在不同的环境（终端）并不是只支持同一的视频格式的，虽然mp4视频能在大部分的终端使用。但有些终端并不能播放mp4，但有可能会支持其它格式的视频，如webm,ogg等，有关于各终端支持的视频格式如下说明：

  浏览器/平台   HTML5支持的视频格式   flash支持的视频格式

Chrome	MP4, WebM	Flv,F4v,Mp4
Firefox	WebM	Flv,F4v,Mp4
Internet Explorer	MP4	Flv,F4v,Mp4
Safari	MP4	Flv,F4v,Mp4
iOS	MP4,m3u8	不支持
Android	MP4,m3u8	Flv,F4v,Mp4
Opera	WebM,m3u8	不支持
IPad	MP4,m3u8	不支持
Iphone	MP4,m3u8	不支持

 

7

RTMP视频的调用及相关说明

 

在ckplayer中，视频的格式是智能判断的。所以rtmp视频调用的方式跟任何调用普通视频的方法是一样的（在HTML5环境中不同，HTML5是不支持播放rtmp视频流的，需要把直播视频流打包成m3u8格式，有关于怎样将rtmp打包成m3u8以支持非pc终端的方法请自行搜索）。

下面是一个实例，注意，html5部分的m3u8地址是一个不可以访问的地址，只是做个示例而已

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'rtmp://live5.cqnews.net:1935/live/TVFLV13',
  c:'0',
  lv:'1',
  p:1
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
 var video=['http://www.ckplayer/live/live.m3u8'];
 CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video,params)
</script>

f值里的就是一个rtmp视频流地址，请注意格式，rtmp://ip/live(流地址)/livestream(实例名称)

如果是多级目录，比如地址是rtmp://localhost/vod/ab/c的。在ckplayer里播放的话，需要修改二个地方，

一个是修改ckplayer.js和ckplayer.xml里的ck.pm_spac = '|';改成ck.pm_spac = ',';总至不能用|，用其它的任何符号都能，此时的|我们需要在地址里做为区分rtmp的协议和实例名称

二是调用视频地址时修改f:'rtmp://localhost/vod/ab/c'为rtmp://localhost/vod|ab/c

这样就可以了，注意竖线前面是地址，后面是实例名称

这方法针对多级目录的rtmp有效

如果是使用red5搭建的rtmp播放环境或使用自己的程序搭建的rtmp环境，还需要注意设置ckplayer.js里的setup:''值(ckplayer.xml里的<setup></setup>)的第23个参数，设置成0，因为播放器在连接服务器的时候有时会收到一个断开信号，但是因为是基于rtmp协议的，会自动等待连接，无需重复请求连接，重复请求倒会导致不能连接上服务器

另外还要注意ckplayer.js里setup:''值(ckplayer.xml里的<setup></setup>)的第13个参数，播放器的缓冲时间设置不能高于你服务器设置的缓冲时间。

lv值的意思，当设置成1是，播放器会认为此时是在播放直播放，不会在时间处显示已播放时间和总时间，并且会锁定进度栏和快进快退按钮

 

8

调用方式三：使用adobe提供的js函数swfobject（不推荐）

adobe的swfobject函数是一个比较强大的调用swf文件的函数，但是因为如下原因，ckplayer官方在6.4以后不再提供该函数

1：该函数文件比较大

2：不兼容HTML5

3：很多用户本身自己网站里已存在该函数

如果你想使用该函数调用播放器，请自行下载

下面以swfobject2.2为例调用播放器，因为是兼容了html5，所以下面的示例中也使用了CKobject

调用代码如下：

<div id="video"><div id="a1"></div></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/01.mp4',
  c:0,
  p:1
  };
 var params={bgcolor:'#000',allowFullScreen:true,allowScriptAccess:'always'};
 var attributes={id:'ckplayer_a1',name:'ckplayer_a1'};
 swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes);
 var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
 var support=['iPad', 'iPhone', 'ios'];
 CKobject.embedHTML5('video','ckplayer_a1',600,400,video,flashvars,support); 
</script>

上面的代码每一行的意思以及每一个参数的意思解释如下：

1：<div id="video"><div id="a1"></div></div>

播放容器，即播放器最后将动态的在这里进行加载，这是有二个容器嵌套使用的，外面的容器的id="video"，里面的容器的id="a1"

为什么要放二个容器的，其实理论上用CKobject函数调用是不需要二个容器的，但是因为如果你是使用的swfobject调用的话就需要了。便于控制。

id="a1"的容器主要用来装载swf播放器

id="video"的容器主要用来装载html5的播放器

2：<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>

这一行是引入播放器的js配置文件，因为Ckobject函数就是写在这个文件里，要注意src的路径要正确，不然则调用错误

3：<script type="text/javascript">

这是html里执行javascript（缩写：js）代码的标志，需要跟</script>（代码第15行已有）成对出现

4-8：var flashvars={};

这 是js里定义对象的代码。这里定义了一个对象，这个对象是用来保存设置播放器里初始化时相关的配置，比如f值是定义视频地址的。c值是定义该播放器调用 ckplayer/ckplayer.js中的ckstyle()函数做为风格配置参数，p:1是定义该视频默认直接播放。如果是p:0则视频默认暂停

9：var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};

这里也定义了一个对象，是设置播放器相关属性的。bgcolor是播放器的背景颜色，allowFullScreen是是否允许全屏，allowScriptAccess是否允许播放器跟页面中的js进行交换，wmode是设置播放器是否透明

10：var attributes={id:'ckplayer_a1',name:'ckplayer_a1'};

该对象是设置播放器的id和name名称，这个参数是很有必要设置的

11：swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes);

该行是调用swf播放器的代码，要注意二个swf文件的路径

    参数分别表示的意思如下：
     1、播放器地址
     2、播放器的容器，将会在该id的容器（可以是div容器，也可以是别的，如span,li之类的反正有id就可以了）
     3、播放器的宽
     4、播放器的高
     5、播放器所需flash插件的版本
     6、检查flash插件版本的文件，要注意路径
     7、即上面定义的var flashvars变量
     8、即上面定义的 var params变量
     9、即上面定义的 var attributes变量

至此，调用swf播放器的代码已结束。如果你只用swf，下面的内容可以不了解。

12：var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];

定义html5视频所用到的视频地址的一个数组，为了适应不同的浏览器和平台，建议该数组增加更多的视频格式。如官方首页设置的样式

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'];

上面的代码演示了调用三种视频格式的方法，分别调用了mp4,webm,ogg三种视频格式，当然还可以增加另外的视频格式如m3u8

关于这个参数还有另外的一种调用方式是使用网址形式的调用。代码如下：

var video=['http://www.ckplayer.com/1.php?a=2->ajax/get/utf-8'];

上面的代码是指将从http://www.ckplayer.com/1.php?a=2这个地址读取视频地址传递给html5播放器使用，该页面地址的源代码里只需要输出一个正确的视频地址即可。不需要有其它内容，当然也可以地址前面加上相关的参数比如

{p->1}http://www.ckplayer.com/1.mp4

->后面的各个参数的意思如下：

ajax：使用无刷新读取网址形式调用视频地址

get：使用get方法传递参数，另外的还有一个post方法

utf-8：是该地址的网页编码是utf-8的，其它的还有如gb2312

13：var support=['iPad', 'iPhone', 'ios'];

定义一个（数组）变量来设置在哪些平台或浏览器中使用html5播放器，以下列出了该数组可以定义的数值以及对应的平台

数组内容	作用
all	所有平台都使用html5
all+false	所有不支持flash的平台都使用html5
iPhone	iPhone
iPad	iPad
ios	ios终端
android	android终端或者uc浏览器
trident	IE内核
presto	opera内核
webKit(可加上版本号：如webKit5)	苹果、谷歌内核
gecko (可加上版本号：如gecko10)	火狐内核
mobile (可加上版本号：如webKit5)	移动终端
webApp	web应该程序
msie (可加上版本号：如msie10)	IE浏览器

使用方法举例

var support=['all'];所有的平台都使用html5

var support=['all+false'];//所有的不支持flash或没安装flash插件的平台上都使用html5

var support=['android+false','iPad'];//在iPad上使用html5，在android(安卓)上没有安装flash插件的情况下使用html5

14:CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
括号里面的参数的意思分别是
1、视频容器id
2、播放器id
3、宽度
4、高度
5、视频地址
6、相关设置
7、支持的平台

15：</script>

调用播放器结束

 

9

flashvars里各参数的功能介绍

参数	默认	使用说明
f	无	s=0：为普通的视频地址 s=1：是一个网址，网址里存放视频地址 s=2：是一个网址，网址里输出xml格式的视频地址 s=3：是一个swf文件地址，该文件可以自定义方式读取视频地址，然后传递给播放器，播放器在收到地址后则卸载掉该文件  s=4：是一个swf文件地址，该文件可以向播放器发送视频流和提供各种操作函数，比如说播放，并且会加载在播放器界面中
a	无	当s>0时，a和f值拼出一个新的地址，在新的地址里读取视频地址
s	0	调用方式 =0：普通方法（f=视频地址） =1：网址形式 =2：xml形式 =3：swf形式
c	0	是否读取文本配置,0不是，1是，当=1时，播放器会自动读取和播放器相同名称的xml(默认是的ckplayer.xml)来进行进一步的配置
x	无	在c=1的时候，自定义调用xml风格路径，为空的话将调用跟播放器同名的xml文件。这个参数的作用是可以使用多套风格或设置的文件来进行随机调用 在c=0的时候，指定调用js中的风格配置函数，如c:0,x:'ckstyle2'，
i	无	初始图片地址，就是在播放器默认是暂停(p:0)或默认不加载(p:2)的情况下先给一张图片遮在播放器前面，让其看起来不会一片黑，关于初始图片的大小的控制请参考配置文件里(ckplayer.js或ckplayer.xml)的setup的第14个参数
d	无	暂停时播放的广告，swf/图片,多个用竖线隔开，图片要加链接地址，没有的时候留空就行
u	无	暂停时如果是图片的话，加个链接地址，如果没有就留空，
l	无	前置广告地址，格式支持：swf/图片/http协议视频，多个用竖线隔开，图片和视频要加链接地址(下面r的值)
r	无	前置广告的链接地址，多个用竖线隔开，没有的留空
t	5|5|5...	视频开始前播放swf/图片时的时间，多个用竖线隔开 ，如果不设置，默认是每个广告5秒的时间
y	无	这里是使用网址形式调用广告地址时使用，如果要使用这个参数，前置广告的l,r,t里至少要设置l的参数为空，播放器才会根据y的值进行调用
e	1	视频结束后的动作 =0：调用js函数function playerstop(){}、这个参数有一篇单独的使用说明 =1：是循环播放， =2：是暂停播放并且不调用暂停广告 =3：是调用视频推荐列表的插件 =4：是清除视频流并调用js、功能和0差不多 =5：是暂停并且同时调用暂停广告 =6：会调用js函数（参考=0时），并且会退出全屏
v	80	默认音量，0-100之间
p	0	视频默认播放/暂停/不加载  = 0：暂停  = 1：自动播放  =2：默认不加载视频，点击时才加载视频
h	0	播放http视频流时采用何种拖动方法，  =0：不使用任意拖动  =1：按关键帧进行拖动  =2：是按关键时间点进行拖动  =3：是自动判断(如果视频格式是.mp4就按关键时间点，.flv就按关键帧)  =4：是自动判断(只要包含字符mp4就按关键时间点，只要包含字符flv就按关键帧)
q	"start"	视频流拖动时参考参数，默认是start
m	无	视频链接地址，如果该值不为空，则用户点击播放器会跳转到该设置的网地址上，做视频广告时用到
o	无	在设置p=2，即默认不加载视频的时候向播放器传递该视频的时间，单位：秒，也可以不传
w	无	在设置p=2，即默认不加载视频的时候向播放器传递该视频的字节数，也可以不传
g	0	视频直接g秒开始播放，这个功能类似跳过片头的功能，当然这个功能还可以用js来实现
j	0	视频提前j秒结束，跳过片尾的功能  >0时，视频大于j秒时跳转至结束 <0时，视频大于（总时间-j秒）时跳转
k	无	提示点时间，如 30|60鼠标经过进度栏30秒，60秒会提示n参数指定的相应的文字，这是以|隔开的一个数字数组 这个是鼠标经过进度栏上一些关键点时显示一个提示框，这些点需要自行设置，点的样式可以在配置文件里ck.pm_start参数设置
n	无	提示点文字，跟k配合使用，各提示文字以|隔开，所以提示文字里不能有|，(如：提示点1|提示点2)
b	0	指定播放器是否进行交互，默认交互，b=1时不使用交互，所以在站外引用时需要设置ckplayer.xml里的里设置<flashvars>{b->1}</flashvars>
z	无	缓冲广告地址，只能是一个swf文件
wh	无	固定视频比例，比如wh:'16:9'，则视频将会以16:9的比例进行计算
lv	0	是否是直播视频流。默认0不是，1是，当=1时，播放器会自动锁定进度栏和快进快退按钮
loaded	无	当播放器加载成功后调用该参数定义的函数，字符类型

 

10

调用视频地址方式一：普通调用

以下的代码是演示普通方式调用视频地址的方法

<div id="video"><div id="a1"></div></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',
  s:0,
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

普通的调用视频地址方式即当s=0(可以不设置)时，播放器会直接读取flashvars里的f值进行播放，此时f值必需要是一个可以播放的视频文件地址。

此时当你需要将多段视频拼合成一段大视频进行播放的话，则需设置f:'1.flv|2.flv|3.flv'这样的形式

 

11

调用视频地址方式二：网址形式调用

 下面的代码演示如何通过调用一个网址（该网址输出视频地址）来播放视频

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'http://www.ckplayer.com/down/url.php?id=[$pat]',
  a:'1',
  s:1,
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

要使用该方式调用视频，需要注意如下几点：
1、s=1
2、f值可以设置在ckplayer.xml或ckplayer.js里，这样才能达到隐藏视频地址的功能，以ckplayer.js为例，我们可以找到ckstyle中的flashvars:'',设置一下

flashvars:'{f->http://www.ckplayer.com/down/url.php?id=[$pat]}',

在该处，甚至可以把其它的参数比如s也设置到flashvars里：

flashvars:'{f->http://www.ckplayer.com/down/url.php?id=[$pat]}{s->1}',

补充说明：如果你是使用的ckplayer.xml做为配置文件，则对应的设置应该是

<flashvars>{f->http://www.ckplayer.com/down/url.php?id=[$pat]}{s->1}</flashvars>

小知识：这二个参数里并不是只可以设置{f->}{s->}，还可以设置更我的。比如前置广告暂停广告等都可以在此处设置，以方便统一管理。各参数都是{参数->值}的形式

这样你的调用代码只需要如下形式即可

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  a:'1',
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

当以上的代码出现在你的页面中时，普通用户是没法知道你的视频地址的

下面说下a值，a值是用来和f的值拼合组装成新的一个网页地址来供调用视频地址使用的。

a可以是单个值，也可以是数组的形式，如下

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'http://www.ckplayer.com/down/url.php?[$pat]&id1=[$pat1]'  ,  
  a:'2|3',
  s:1,
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

这样播放器就会根据网址：video.php?id=2&id1=3来调用视频

需要注意的是F值中的&符号要变成%26

需要注意的是[$pat]和[$pat0]是相等的，都是调用a值里的第一个值的。

对应的替换符和值对应关系如下：

a:'a0|a1|a2|a3'
[$pat]	a0
[$pat0]	a0
[$pat1]	a1
[$pat2]	a2
[$pat3]	a3

 

12

调用视频地址方式三：xml格式调用

下面的代码演示如何通过调用一个xml形式的网址（该网址输出xml格式的视频地址）来播放视频

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'http://www.ckplayer.com/down/xml.php?id=[$pat]',
  a:'1',
  s:2,
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

要使用该方式调用视频，需要注意如下几点：
1、s=2

2、有关于xml的标准请参考http://www.ckplayer.com/down/xml.php?id=1

 <?xml version="1.0" encoding="utf-8"?>
 <ckplayer>
  <flashvars>
   {d->1.swf}
  </flashvars>
  <video>
   <file>第一段视频地址</file>
   <size>第一段视频的字节数，如果没有，可以直接删除该项，那么播放器就会自动计算字节</size>
   <seconds>第一段视频的时间，秒数，没有也直接删除</seconds>
  </video>
  <video>
  <file>第二段视频地址</file>
   <size>第二段视频的字节数</size>
   <seconds>第二段视频的秒数</seconds>
  </video>
 </ckplayer>

3、f值可以设置在ckplayer.xml或ckplayer.js里，这样才能达到隐藏视频地址的功能，以ckplayer.js为例，我们可以找到ckstyle中的flashvars:'',设置一下

flashvars:'{f->http://www.ckplayer.com/down/xml.php?id=[$pat]}',

在该处，甚至可以把其它的参数比如s也设置到flashvars里：

flashvars:'{f->http://www.ckplayer.com/down/xml.php?id=[$pat]}{s->1}',

补充说明：如果你是使用的ckplayer.xml做为配置文件，则对应的设置应该是

<flashvars>{f->http://www.ckplayer.com/down/xml.php?id=[$pat]}{s->1}</flashvars>

小知识：这二个参数里并不是只可以设置{f->}{s->}，还可以设置更多的。比如前置广告暂停广告等都可以在此处设置，以方便统一管理。各参数都是{参数->值}的形式

这样你的调用代码只需要如下形式即可

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  a:'1',
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

当以上的代码出现在你的页面中时，普通用户是没法知道你的视频地址的

下面说下a值，a值是用来和f的值拼合组装成新的一个网页地址来供调用视频地址使用的。

a可以是单个值，也可以是数组的形式，如下

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'http://www.ckplayer.com/down/xml.php?[$pat]&id1=[$pat1]'  ,  
  a:'2|3',
  s:1,
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

这样播放器就会根据网址：video.php?id=2&id1=3来调用视频

需要注意的是F值中的&符号要变成%26

需要注意的是[$pat]和[$pat0]是相等的，都是调用a值里的第一个值的。

对应的替换符和值对应关系如下：

a:'a0|a1|a2|a3'
[$pat]	a0
[$pat0]	a0
[$pat1]	a1
[$pat2]	a2
[$pat3]	a3

 

13

调用视频地址方式四：用flash插件调用

 

这种方法是对于有as3语言基础的人有用处

原理就是播放器会根据你的设置调用一个swf文件并且跟该文件进行交互，然后该文件向播放器发送视频地址（各段视频的时长，字节数）。然后播放器进行播放

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
  f:'http://www.ckplayer.com/down/geturl.swf',
  a:'1',
  s:3,
  c:0
  };
 CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>

geturl.swf里的代码本教程提供一个简单的示例。在实际使用中需要你自行进行扩展

var ck:Object;
function setAppObj(app:Object):void{//系统保留，不能删除
    ck=app;
   Address();
}
function Address(){
    ck.loadAddress("1.flv|2.flv","3000|3000","35|35");
}

setAppobj()该函数是用来接受播放器发送自身对象的，当播放器加载该插件(geturl.swf)后会判断里面是否有一个setAppobj的函数，有的话就把播放器自身当作一个对像传递给该函数，可以理解成

function setAppObj(播放器:Object):void{}

然后在该段代码里应该设置了ck=app所以ck就是指播放器（而不是指该插件）

下面的loadAddress是播放器里的一个函数，只要调用就可以发送初始化的视频地址了。