功能示例
#說明
功能設置的方式分成兩種，一種是初始化播放器時進行設置，一種是在使用過程中通過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.xh334.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>觀看示例
視頻容器