ckplayer.js视频播放插件

网页中常见的功能就是播放视频，下面介绍的这个ckplayer.js既可以在pc端播放，也可以在手机网页上播放。

可调用flash也可以调用html5播放器：

<div id="a1"></div><script type="text/javascript" src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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是指全部平台都调用

);

其中

/**注意，flashvars中的参数：  v：ckplayer_volume，视频默认音量 0-100 之间，默认为 85。  p：ckplayer_play，是否自动播放，可以为 1 或 0，默认为 1，参数不为 1 时播放器加载完成后均为暂停状态。  f：ckplayer_flv，视频地址，默认为空，可以是单独视频地址、url 地址列表文件、*/

下面贴一个实例代码：

html代码：

<div id="video_c"></div>

css代码：

 #video_c{ width:840px; height:353px;margin:0 auto;}

js代码：

<script type="text/javascript" src='/images/loading.gif' data-original="ckplayer/ckplayer.js"></script><script type="text/javascript">var flashvars={  f:'ckplayer/video/1_0.flv',  p:0  //i：'http://www.ckplayer.com/static/images/letitgo.jpg' //视频播放器初始图片地址，即封面图片，默认为空。  };var video=['ckplayer/video/1_0.mp4->video/mp4'];CKobject.embed('ckplayer/ckplayer.swf','video_c','ckplayer_a1','100%','100%',false,flashvars,video);</script>

结果截图如下如下：