CKplayer.js X2视频播放器插件下载

ckplayer是一个比较强大的开源js播放器，支持的格式非常多。考虑到受众众多，下载鸥在这里放个下载信息与简单的配置介绍。


 

ckplayer播放器介绍

CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4,m3u8、rtmp视频流等格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，具体的各按钮的位置和底部背景的设置在ckplayer/ckplayer.js里设置。
 

ckplayer.js播放器X2支持功能

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

 

调用ckplayer播放器方式

该调用方式为标准调用方式，如果是普通的.mp4视频，并且没有广告设置的话，推荐使用这种调用方式。兼容PC端和移动端，兼容大部分的平台（浏览器），代码如下：

<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>
<div class="video" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
    //定义一个变量：videoObject，用来做为视频初始化配置
    var videoObject = {
    container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
    variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
    video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
    };
    var player = new ckplayer(videoObject);//初始化播放器
</script>

 

初始化配置里的属性说明

<script type="text/javascript">
    var videoObject = {
        container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
        volume: 0.8, //音量，范围：0-1
        poster: 'poster.png', //封面图片
        video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4',//视频地址
        autoplay: false,//是否自动播放
        loop: false,//是否需要循环播放
        live: false,//是否是直播
        duration: 0,//指定总时间
        forceduration:0,//强制使用该时间为总时间
        seek: 0,//默认需要跳转的秒数
        drag: '',//拖动时支持的前置参数
        loaded: '',//加载播放器后调用的函数
        flashplayer: false,//设置成true则强制使用flashplayer
        html5m3u8: false,//PC平台上是否使用h5播放器播放m3u8
        track: null,//字幕轨道
        cktrack: null,//ck字幕
        cktrackdelay:0,//字幕显示延迟时间
        preview: null,//预览图片对象
        prompt: null,//提示点功能
        type: '',//视频格式
        crossorigin: '',//设置html5视频的crossOrigin属性
        crossdomain: '',//安全策略文件地址
        unescape: false,//默认flashplayer里需要解码
        mobileCkControls: false,//移动端h5显示控制栏
        mobileAutoFull: true,//移动端是否默认全屏播放
        playbackrate: 1,//默认倍速
        h5container: '',//h5环境中使用自定义容器
        debug: false,//是否开启调试模式
        overspread:true,//是否让视频铺满播放器
        config: '',//调用配置函数名称
        language:'',//语言文件路径
        style:'',//风格文件路径
        adfront: '',//前置贴片广告列表
        adfronttime: '',//前置贴片广告强制时间列表
        adfrontlink: '',//前置 贴片广告链接地址列表
        adpause: '',//暂停广告列表，只是是图片
        adpausetime: '',//暂停广告列表每个图片播放的时间
        adpauselink: '',//暂停广告列表的链接地址列表
        adinsert: '',//插入广告列表
        adinserttime: '',//插入贴片广告时间列表
        adinsertlink: '',//插入贴片广告链接列表
        inserttime: '',//插入贴片广告显示的时间点列表
        adend: '',//播放结速帖片广告列表
        adendtime: '',//播放结速帖片时间列表
        adendlink: '',//播放结速帖片链接列表
        advertisements: ''//可以使用单独的json文件配置广告
    };
</script>

 

视频地址调用方式

视频地址的调用方式分成两种，一种是普通形式，一种是json文件调用形式

普通调用方式：

普通调用方式分成两种，一种是单视频调用，一种是多个清晰度调用

单地址视频调用如下

var videoObject = {
        container: '.video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new ckplayer()的对象
        video:'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
 };

多个视频有清晰度的调用方式如下：

var videoObject = {
        container: '.video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new ckplayer()的对象
        video: [
              ['http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
              ['http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
              ['http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 0],
              ['http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0]
       ]//视频地址
};

通过以上配置，我们就实现了视频播放器ckplayer的使用。
 

附注

如需查阅更多配置文档，可进入此链接：https://www.ckplayer.com/manual/12.html#m48