基础
序言
环境支持
文件结构
使用
安装
功能示例
JS-控制播放器
JS-监听播放器
视频处理
ffmpeg使用教程
移动元数据
服务器配置
IIS支持视频播放
apache视频支持
nginx视频支持
常见问题
播放器问题
视频播放问题

功能示例

#说明

功能设置的方式分成两种，一种是初始化播放器时进行设置，一种是在使用过程中通过js进行配置的修改。

#修改logo

该功能只能在初始化时进行配置，代码如下：

var videoObject = {
    ...
    logo:'images/logo.png',
    ...
}
new ckplayer(videoObject );

如需修改logo的位置，则需要修改样式css文件中的.ckplayer-ckplayer .ck-main .ck-logo{}

观看示例视频

视频容器

#修改loading

loading样式在css文件中修改，具体定义为：.ckplayer-ckplayer .ck-main .ck-loading{}

#修改右键

在调用播放器初始化时进行配置

var videoObject = {
    ...
    menu:[
	{
	    title:'ckplayer',
	    link:'http://www.ckplayer.com'			
	},
	{
	    title:'version:X3',
	    underline:true
	},
	{
	    title:'调用外部JS',
	    javascript:'hello'
	},
	{
	    title:'关于视频',
	    click:'aboutShow'
	}
    ]
    ...
}
new ckplayer(videoObject);
function hello(){
    alert('您好，朋友');
}

从上面代码中可以看出，右键菜单是以多个对象组成的数组形式进行配置，每个对象配置一行菜单。

对象属性说明：

title：菜单标题，必需

link：菜单链接地址：非必需

click：菜单单击触发内部事件，字符形式

javascript:菜单单击触发外部js，字符形式

underline：是否需要在当前菜单项下面显示间隔线

观看示例视频

视频容器

#点播

点播是ckplayer最基础的应用，只需要简单配置即可

var videoObject = {
    container: '.video', //容器的ID或className
    video:'demo.mp4'
}
new ckplayer(videoObject);

#直播

使用直播的方法很简单，只要在初始化时设置live:true

var videoObject = {
    container: '.video', //容器的ID或className
    live:true,//指定为直播
    plug:'hls.js',//使用hls.js插件播放m3u8
    video:'live.m3u8'//视频地址
}
new ckplayer(videoObject);

观看示例视频

视频容器

#直播+回看

直播+回看的原理：

1：初始化时设置live的值为直播开始时间戳，精确到毫秒(13位数字)。

2：监听seek动作，获取要回看的时间点，切换成点播

3：点播状态下初始化时显示“回到直播”按钮，并同时监听按钮点击事件

观看示例视频

视频容器

#使用hls.js插件播放m3u8

移动端播放m3u8不需要使用播放。

PC端播放m3u8需要使用hls.js插件，支持点播和直播

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="ckplayer/hls.js/hls.min.js"></script>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:'hls.js',//设置使用hls插件
				video:'/video/m3u8/index.m3u8'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例视频

视频容器

#使用flv.js播放flv文件

使用flv.js可以实现在多平台上播放flv格式视频，包含点播+直播

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="ckplayer/flv.js/flv.min.js"></script>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:'flv.js',//设置使用flv插件
				video:'/video/temp.flv'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看播放单个flv格式视频示例视频

视频容器

观看播放多段flv格式视频示例视频

视频容器

#使用mpegts插件播放ts

注意，播放ts，只能用于直播，不建议用于点播！

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="ckplayer/mpegts.js/mpegts.js"></script>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:'mpegts.js',//设置使用mpegts.js插件
				live:true,
				video:'/video/temp.ts'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例视频，由于没有ts直播源，本示例只演示对于ts格式的支持，并不是真正的直播

视频容器

#播放mpd格式视频

播放器初始化时属性plug不但可以配置固定的插件，还可以使用自定义的函数进行播放，本视频演示了使用dash.js进行视频播放的示例，需要使用该功能，需要自行下载dash.js相关文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>播放mpd-ckplayer</title>
		<link rel="stylesheet" type="text/css" href="/public/static/ckplayer-x3/css/ckplayer.css">
		<script type="text/javascript" src="/public/static/ckplayer-x3/js/ckplayer.js"></script>
		<script type="text/javascript" src="/public/static/ckplayer-x3/dash.js/dash.all.min.js"></script>
		<div class="video"></div>
		<script>
			function dashPlayer(video,fileUrl){
				video.attr('data-dashjs-player',' ');
				video.attr('src',fileUrl);
			}
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:dashPlayer,//使用自定义的形式播放视频
				video:'https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mpd/default/1.mpd'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例

视频容器

#贴片广告

贴片广告的定义需要在初始化时进行。

方法是首先定义广告属性ad，ad的类型是object，ad里可以定义两个属性：front和pause，分别代表贴片广告和暂停广告。

front类型为object，可以定义贴片广告是否启用关闭广告按钮，显示关闭广告按钮的时间等属性，具体可以看下方的示例

观看贴片广告示例视频

视频容器

#暂停广告

暂停广告需要在初始化时进行配置。

观看示例视频

视频容器

#切换语言

使用其它语言包有两种方法：

1：在页面顶部引入语言包文件(js文件)

2：在初始化时配置语言包，具体可查看language文件下的文件名

两种形式的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
		<script type="text/javascript" src="ckplayer/language/en.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				video:'website:../video.json'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				language:'en',//配置为使用英文语言包
				video:'website:../video.json'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例视频

视频容器

#限制进度调节框

限制进度调节框有两种形式：

1：初始化时进行配置

2：使用js实时对播放器进行配置

var videoObject = {
    ...
    timeScheduleAdjust:1,
    ...
}
new ckplayer(videoObject);

timeScheduleAdjust的默认值为1：正常拖动

0=禁止拖动

1=正常拖动

2=是只能前进（向右拖动）

3=是只能后退

4=是只能前进但能回到第一次拖动时的位置

5=看过的地方可以随意拖动

观看示例

视频容器

#右键点击“关于视频”显示的内容说明

在默认的播放器右键菜单里有一个“关于视频”菜单项，点击该菜单项会在播放器界面上显示相关内容，该部分内容可以自定义，如果未定义，则使用默认内容。

自定义的内容里支持部分变量，以下列出支持的变量：

{loadTime}：已加载的秒数

{duration}：视频总时间

{videoWidth}：视频宽度

{videoHeight}：视频高度

{volume}：视频音量

{fps}：FPS

{audioDecodedByteCount}：音频解码字节数

{videoDecodedByteCount}：视频解码字节数

观看示例视频

视频容器

#弹幕和缓动

弹幕的步骤原理如下：

第一步：添加一个元件至播放器内，位置为播放器最右侧外方

第二步：调用元件的缓动事件让其缓动到播放器左侧，并且监听该缓动事件

第三步：监听到缓动结束，删除掉该元件

var ele=player.layer({//新建一个元件，附值给变量ele
    class:'dm',//元件样式名称
    content:'弹幕内容'
});
//animate-缓动函数，ele.getWidth()是获取元件的宽度
ele.animate('left:10px;top:10px;width:100px;height:20px'),1000,'',function(){
    ele.remove();//删除元件
});

使用解释：animate('样式列表，支持：top,bottom,left,right,alpha,width,height',时间,'效果',缓动结束动作)

观看弹幕示例

视频容器

观看所有支持的缓动示例

视频容器

观看完整弹幕解决示例（仅限前端）

视频容器

#视频预览

视频预览功能是使用截图完成，即初始化播放器时需要为该视频提供一组图片，可以是多张，每张图片的尺寸可以自定义，每张图片里包含10x10=100张小图片。截图制作可以查看本手册里ffmpeg相关内容

<div class="video"></div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		preview: { //预览图片
			file: ['/video/1.png', '/video/2.png', '/video/3.png', '/video/4.png'],
			scale: 2,//预览图片截图间隔时间，单位：秒
			thumbnail:[10,10],//缩略图的每行数量，列数量（共多少列）
			type:0//预览图样式，0=单个，1=横排
		},
		video:'temp.mp4'
	};
	new ckplayer(videoObject);
</script>


观看示例

视频容器

#提示点

提示点是指在进度条上展示的特定点，用于提示当前时间点的内容。

<div class="video"></div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		prompt: [ //提示点
			{
				words: '对战：精英怪•赤尻马猴',
				time: 210//时间，单位：秒
			},
			{
				words: '对战：亢金龙',
				time: 386
			}
		],
		video:'website:../video.json'
	};
	new ckplayer(videoObject);
</script>

观看示例

视频容器

#字幕

ckplayer的字幕功能是使用的系统自带的字幕功能，在绝大多数浏览器内正确支持，下面的代码展示了一种双语字幕支持的示例：

<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		track:[
			{
				kind:'subtitles',
				src:'/video/zh.vtt',
				srclang:'zh',
				label:'中文',
				default:false,
			},
			{
				kind:'subtitles',
				src:'/video/en.vtt',
				srclang:'en',
				label:'English',
				default:false,
			}			
		],
		video:'website:../video.json'
	};
	new ckplayer(videoObject);
</script>

观看示例视频

视频容器

#截图

使用截图功能，需要考虑两部分内容，一是服务器端需在配置权限允许播放视频的域截图，二是调用播放器代码需要配置（crossOrigin属性配置跨域），具体示例代码如下：

<div class="video" style="width: 100%; height: 500px;max-width: 800px;">播放容器</div>
<script>
	//调用开始
	var videoObject = {
		container: '.video', //视频容器
		crossOrigin:'Anonymous',//发送跨域字符
		video:'video.mp4'//视频地址
	};
	var player=new ckplayer(videoObject)//调用播放器并赋值给变量player
	player.screenshot()//截图并返回图片地址
</script>

观看示例

视频容器

#默认旋转视频

在播放器初始化时可以指定视频的旋转角度，旋转角度只支持4个值：0，90，180，270。以下为代码示例：

var videoObject = {
    container: '.video', //视频容器
    poster:'video/poster.png',//封面图片
    rotate:90,//旋转90度
    video:'video/lc.mp4'//视频地址
};
var player=new ckplayer(videoObject)//调用播放器并赋值给变量player

观看示例

视频容器

#默认缩放视频

在播放器初始化时可以指定视频的旋转角度，旋转角度只支持4个值：0，90，180，270。以下为代码示例：

var videoObject = {
    container: '.video', //视频容器
    poster:'video/poster.png',//封面图片
    zoom:50,//缩放50
    video:'video/lc.mp4'//视频地址
};
var player=new ckplayer(videoObject)//调用播放器并赋值给变量player

观看示例视频

视频容器

#同页放置多个播放器

需要多次调用播放器代码，并且设置容器不同即可。示例代码如下：

<div class="video">容器一</div>
<div class="video2">容器二</div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		video:'website:../m3u8.json'
	};
	new ckplayer(videoObject);
	/*调用第二个播放器开始*/
	var videoObject2 = {
		container: '.video2', //容器的ID或className
		video:'website:../m3u8.json'
	};
	new ckplayer(videoObject2);
</script>

观看示例

视频容器

#记忆播放

记忆播放可以使用播放器内置属性实现，相关代码如下：

<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		seek:'cookie',//指定跳转到cookie记录的时间，使用该属性必需配置属性cookie
		cookie:'abcdefg',//cookie名称,请在同一域中保持唯一
		video:'website:../m3u8.json'//视频地址
	};
	ckplayer(videoObject);
</script>

观看示例

视频容器