ckplayer只调用html,Ckplayer的安装及调用

一、浏览器环境现状

支持HTML5标准的各浏览器，对视频格式的支持：

HTML5各平台对播放器重要功能的支持：

二、ckplayer环境及格式要求

安装了flashplayer插件的浏览器

支持HTML5规范的浏览器

在PC端，目前各主流浏览器的新版本基本都默认安装了flashplayer插件。在移动端，各主流浏览器基本都支持HTML5标准，虽然各浏览器厂商在支持的标准上有一定的区别，但目前HTML5标准的制定越来越统一化。

三、安装调用

3.1 文件结构

ckplayer.js文件功能说明：

提供一套使用JS调用播放器的函数，即CKobject(函数)对象，该对象可以自行判断平台(浏览器)的类型以调用适应平台的播放模式(自动选择使用flashplayer播放还是HTML5的Video播放)，同时也支持仅调用flashplayer播放或仅调用HTML5播放。另外，该对象提供HTML5的监听，交互以及flashplayer的监听，交互中转功能。

设置播放器重要功能，播放器(ckplayer.swf)加载后首先会调用ckplayer.js中的ckstyle()函数设置最初的配置。HTML5也会调用该函数的部分参数。

3.2 调用方式

标准(精简，兼容)调用方式：自动判断平台选择调用Flashplayer还是H5-video。功能方面只保持播放一个普通视频，兼容PC端和移动端。视频格式推荐使用mp4，因为此格式可以兼容大部分的平台(浏览器)。

var flashvars={

f:'http://movie.ks.js.cn/flv/other/1_0.mp4', //视频地址

i:’../img/bg-video.png’, //指定播放器暂停情况下显示图片

s:0, //使用网址形式调用视频地址

c:0, //只在站内使用播放器，调用ckplayer.js中ckstyle()函数

h:3, //按后缀名自动判断按关键帧(mp4)还是时间点(flv)进行拖动

e:1 //支持HTML5，播放结束时循环播放

};

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

代码说明：

播放器所在容器(播放器加载后将显示在id="a1"的div容器中)。

引入ckplayer.js，该文件为主要文件，兼容PC和移动端时必需引入

var flashvars={

f:'http://movie.ks.js.cn/flv/other/1_0.mp4',

c:0

};

定义播放器加载(初始化)时要传递的参数，flashvars是一个(对象)变量，该变量主要为PC端的flashplayer所使用。但部分参数也为移动端H5所使用。该变量所有属性的功能及作用请查看本手册中单独的有关该变量的说明(建议了解以下相关内容里有相关链接)。特别说明：f属性仅供pc端使用，如果是多段视频可以用f:'1.flv|2.flv'这样的形式。

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

该变量是一个数组形式。定义了移动端(H5)播放时使用的视频地址，数组结构说明如下：

var video=['视频地址->MIME类型','视频地址->MIME类型','视频地址->MIME类型'];

为什么要定义多个视频地址呢？因为准确的说不同的平台(浏览器)支持不同的视频格式，所以这里可以定义多个不同格式的视频地址。浏览器在播放时第一个视频连接不上时会自动选择链接下面一个视频，直到能播放为止或全部检查完毕为止。

在移动端同时支持使用ajax调用一个网址，再由这个网址里定义视频地址的形式调用。具体的用法请查看本教程里有关于该部分的单独的说明(建议了解以下相关内容里有相关链接)。

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

CKobject是用来调用播放器的函数。里面包含了若干(为了便于理解，我们暂且称其为)子函数。embed是其中的一个函数，该函数的作用是在自动判断平台类型(PC端还是移动端)后调用不同类型的播放器(flashplayer还是h5的video)，该函数准确的格式说明如下：

CKobject.embed('ckplayer.swf地址[必需]', '视频所在容器的ID[必需]', '播放器的ID[必需]',

'宽度[必需，支持具体值以及百分比]', '高度[必需，支持具体值以及百分比]',

'平台优先选项[false=优先使用flashplayer，true=优先使用h5的video]', '初始化参数[必需]',

'移动端所使用的地址数组[必需]', '其它配置[非必需，主要针对flashplayer的配置]');