功能示例
功能示例
#说明
功能设置的方式分成两种，一种是初始化播放器时进行设置，一种是在使用过程中通过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插件，支持点播和直播
观看示例视频
视频容器
#使用flv.js播放flv文件
使用flv.js可以实现在多平台上播放flv格式视频，包含点播+直播
观看播放单个flv格式视频示例视频
视频容器
观看播放多段flv格式视频示例视频
视频容器
#使用mpegts插件播放ts
注意，播放ts，只能用于直播，不建议用于点播！
观看示例视频，由于没有ts直播源，本示例只演示对于ts格式的支持，并不是真正的直播
视频容器
#播放mpd格式视频
播放器初始化时属性plug不但可以配置固定的插件，还可以使用自定义的函数进行播放，本视频演示了使用dash.js进行视频播放的示例，需要使用该功能，需要自行下载dash.js相关文件。
观看示例
视频容器
#贴片广告
贴片广告的定义需要在初始化时进行。
方法是首先定义广告属性ad，ad的类型是object，ad里可以定义两个属性：front和pause，分别代表贴片广告和暂停广告。
front类型为object，可以定义贴片广告是否启用关闭广告按钮，显示关闭广告按钮的时间等属性，具体可以看下方的示例
观看贴片广告示例视频
视频容器
#暂停广告
暂停广告需要在初始化时进行配置。
观看示例视频
视频容器
#切换语言
使用其它语言包有两种方法：
1：在页面顶部引入语言包文件(js文件)
2：在初始化时配置语言包，具体可查看language文件下的文件名
两种形式的代码如下：
观看示例视频
视频容器
#限制进度调节框
限制进度调节框有两种形式：
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相关内容
观看示例
视频容器
#提示点
提示点是指在进度条上展示的特定点，用于提示当前时间点的内容。
观看示例
视频容器
#字幕
ckplayer的字幕功能是使用的系统自带的字幕功能，在绝大多数浏览器内正确支持，下面的代码展示了一种双语字幕支持的示例：
观看示例视频
视频容器
#截图
使用截图功能，需要考虑两部分内容，一是服务器端需在配置权限允许播放视频的域截图，二是调用播放器代码需要配置（crossOrigin属性配置跨域），具体示例代码如下：
观看示例
视频容器
#默认旋转视频
在播放器初始化时可以指定视频的旋转角度，旋转角度只支持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观看示例视频
视频容器
#同页放置多个播放器
需要多次调用播放器代码，并且设置容器不同即可。示例代码如下：
观看示例
视频容器
#记忆播放
记忆播放可以使用播放器内置属性实现，相关代码如下：
观看示例
视频容器
