你的位置:首页 > Java教程

[Java教程]ckplayer.js视频播放插件

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

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

<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是指全部平台都调用

);

 

其中

/**注意,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="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>

结果截图如下如下:

参考地址:

ckplayer官网:http://www.ckplayer.com/
参数介绍链接:http://www.fufuok.com/demo/ckplayer/z.html

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。