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

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，下面为已引入的调用代码：

 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)

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

1：

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

2：

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

3：

这是html里执行javascript（缩写：js）代码的标志，需要跟（代码第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：

调用播放器结束

 

4

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

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

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

1：

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

2：

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

3：

这是html里执行javascript（缩写：js）代码的标志，需要跟（代码第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：播放器放置的容器，这里即上面的

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

4：播放器的宽

5：播放器的高

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

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

11：

调用播放器结束

 

5

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

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

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

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

1：

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

2：

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

3：

这是html里执行javascript（缩写：js）代码的标志，需要跟（代码第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：

调用播放器结束