安装

#安装方法

安装ckplayer很简单,因为ckplayer只是几个文件,将ckplayer文件夹放置在网站目录里即可使用,没有安装过程。

ckplayer是独立的组件,不需要依赖任何其它js插件

在需要调用播放器的页面使用如下代码即可完成配置安装

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
        <script type="text/javascript" charset="utf-8" src="ckplayer/js/ckplayer.js"></script>
    </head>
    <body>
        <div class="video" style="width: 600px;height: 400px;"></div>
        <script type="text/javascript">
            //定义一个变量:videoObject,用来做为视频初始化配置
            var videoObject = {
        	container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class
        	video: 'temp.mp4'//视频地址
            };
            new ckplayer(videoObject);//初始化播放器
        </script>
    </body>
</html>

标准调用代码的示例,调用代码在播放容器下方

视频容器

标准调用代码的示例,调用代码在播放容器上方

视频容器

调用播放器时不进行初始化,使用add函数进行初始化

视频容器

调用播放器时不进行初始化,使用into函数进行初始化

视频容器

#代码说明

<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">

引入ckplayer.css,该文件为界面风格文件,必需引入到页面中,放置于<head>

<script type="text/javascript" src="ckplayer/js/ckplayer.js" charset="utf-8"></script>

引入ckplayer.js,该文件为主要文件,必需引入到页面中,可以放置于<head>,也可以放置于<body>内

<div class="video" style="width:600px;height:400px"></div>

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

var videoObject = {
        container: '.video',//“#”代表容器的ID,“.”或“”代表容器的class
        video:'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
 };

定义播放器初始化时的各种设置

new ckplayer(videoObject);

实例化一个播放器对象,如果需要对播放器进行控制和监听,则需要赋值给变量,使用如下代码即可。

var player=new ckplayer(videoObject);

#初始化配置里的属性说明

<script type="text/javascript">
    var videoObject = {
        container: '',//视频容器的ID
	volume: 0.8,//默认音量,范围0-1
	poster: '',//封面图片地址
	autoplay: false,//是否自动播放
	loop: false,//是否需要循环播放
	rotate:0,//视频旋转角度
	zoom:0,//默认缩放比例
	live: false,//是否是直播
	ad:null,//广告
	backLive:false,//显示返回直播按钮
	seek: 0,//默认需要跳转的秒数
	next: null,//下一集按钮动作
	loaded: '',//加载播放器后调用的函数
	plug:'',//使用插件,目前支持hls.js:用于在pc端播放m3u8,flv.js:播放flv,mpegts.js:播放ts
	duration:0,//如果强制使用点播,而视频里不存在总时间,可以手动指定
	preview: null,//预览图片对象
	prompt: null,//提示点功能
	crossOrigin:'',//发送跨域信息,示例:Anonymous
	video: null,//视频地址
	type:'',//视频类型
	playbackrate: 1,//默认倍速
	ended:null,//结束显示的内容
	webFull:false,//是否启用页面全屏按钮,默认不启用
	theatre:null,//是否启用剧场模式按钮,默认不启用
	controls:false,//是否显示自带控制栏
	rightBar:null,//是否开启右边控制栏
	smallWindows:null,//是否启用小窗口模式
	smallWindowsDrag:true,//小窗口开启时是否可以拖动
	screenshot:false,//截图功能是否开启
	timeScheduleAdjust:1,//是否可调节播放进度,0不启用,1是启用,2是只能前进(向右拖动),3是只能后退,4是只能前进但能回到第一次拖动时的位置,5是看过的地方可以随意拖动
	logo:'',//logo
	menu:null,//右键菜单
	information:{//关于
		'Load:':'{loadTime} second',
		'Duration:':'{duration} second',
		'Size:':'{videoWidth}x{videoHeight}',
		'Volume:':'{volume}%',
		'Sudio decoded:':'{audioDecodedByteCount} Byte',
		'Video decoded:':'{videoDecodedByteCount} Byte'
	},
	track:null,//字幕
	title:'',//视频标题
	language:'',//语言包文件
	barHideTime:1500,//控制栏隐藏时间
	playbackrateOpen:true,//是否开启控制栏倍速选项
	playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
	cookie:null,//cookie名称,在同一域中请保持唯一
	domain:null,//cookie保存域
	cookiePath:'/',//cookie保存路径
	documentFocusPause:false,//窗口失去焦点后暂停播放
	mouseWheelVolume:2,//是否启用鼠标滚轮调节音量功能,0=不启用,1=启用,2=全屏时才启用
	keyVolume:2//是否启用键盘控制音量调节,0=不启用,1=启用,2=全屏时才启用
    };
    </script>

#视频地址调用方式

视频地址的调用方式分成三种:

1:普通形式

2:数组形式

3:文件形式

普通调用方式:

var videoObject = {
        container: '.video',
        video:'video.mp4'
 };

数组形式:

var videoObject = {
        container: '.video',
        video: [
              ['video_cn_bq.mp4', 'video/mp4', '中文标清'],
              ['video_cn_gq.mp4', 'video/mp4', '中文高清']
       ]
};

文件调用方式:

var videoObject = {
        container: '.video',
        video:'website:url.json'
 };

var videoObject = {
        container: '.video',
        video:'url:url.json'
 };

使用文件调用方式时,需要指定video的值为website:json文件地址,json里的格式参考普通形式或数组形式,示例如下:

{

    "poster":"video/poster.jpg",

    "video": "video/1.mp4"

}

#样式定义

样式以css定义,ckplayer的样式文件保存在css/文件夹里。

#语言包选择

语言包文件存放在language/文件夹里,以.js格式文件存储,默认是中文简体,如果需要使用其它语言包,只需要在页面中引入相应的js即可。

引入英文语言包示例

视频容器