目录
1、加载视频流
1.1、html模块
1.2、js模块
2、其他功能
2.1、缩放窗口
2.2、旋转窗口
2.3、卸载播放器
2.4、监听播放时间进度
2.5、定位播放
3、初始化属性说明
4、使用功能一览
ckplayer是一款在网页上播放视频的软件，基于javascript和css，其特点是开源，功能强大，不依赖其它插件，二次开发简单方便。
当前使用X3版本
1、加载视频流
以下代码需要依赖bootstrap、layui前端框架。
实现播放、暂停、全屏、截屏、跳转指定时间段的操作按钮
1.1、html模块
<div class="layui-card">
<div class="layui-card-header">
原始视频 <span style="margin-left: 5px">总时长：</span>
<span style="margin-left: 5px" id="totalMs"></span>秒
</div>
<div class="layui-card-body">
<div class="video" style="width: 100%; height: 600px;">播放容器</div>
<div class="layui-btn-container video-tools" style="padding:10px 10px">
<button type="button" class="layui-btn layui-btn-sm" onclick="player.play()">播放</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="player.pause()">暂停</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="player.webFull()">全屏</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="videoSc()">截图</button>
<button type="button" class="layui-btn layui-btn-sm" onclick="seek()"
style="margin-left: 10px">
跳转
</button>
<input type="number" value="5" id="txtSeek" style="width: 50px">秒
</div>
</div>
</div>1.2、js模块
var played = false;
var player = null;
var videoObject = {};
function initPlayer(url){
//调用开始
videoObject = {
container: '.video', //视频容器
//poster: 'video/poster.png',//封面图片
video: url,//视频地址
screenshot: true,
menu: [
{
title: '技术',
click: 'aboutShow'
},
{
title: '关于',
click: 'aboutShow'
}
]
};
player = new ckplayer(videoObject)//调用播放器并赋值给变量player
player.play(function () {
played = true;
});
player.pause(function () {
});
player.duration(function (t) {
$('#totalMs').text(t);
$('.video-tools button').removeAttr('disabled');
$('.video-tools button').removeClass("layui-btn-disabled");
});
player.full(function (b) {
console.log('监听到全屏状态：' + b);
});
player.ended(function () {
console.log('监听到全屏状态：' + b);
});
player.time(function (t) {
$('#timeEnd').val(t);
//t=当前播放时间});
})
player.seek(function (obj) {
obj['state']=跳转状态，有两个，分别是seeking和seeked
if (obj['state'] == 'seeked') {
$('#timeStart').val(obj['time']);
}
player.pause()
}
);
}
function seek() {
if ($('#txtSeek').val()) {
player.seek(($('#txtSeek').val() * 1));
}
}
function videoSc() {
/* var html='<img src="'+player.screenshot()+'" style="max-width:20%">';
document.getElementById('content').innerHTML=html;*/
if (played) {
player.screenshot();
} else {
layer.msg('请先点击播放', {time: 500, icon: 0})
}
}
2、其他功能
2.1、缩放窗口
<div class="btn-group btn-group-toggle">
<button type="button" class="btn btn-success">缩放：</button>
<button type="button" class="btn btn-success" onclick="player.zoom(50)">50%</button>
<button type="button" class="btn btn-success" onclick="player.zoom(75)">75%</button>
<button type="button" class="btn btn-success" onclick="player.zoom(100)">100%</button>
</div>2.2、旋转窗口
旋转角度只支持4个值：0，90，180，270。
<div class="btn-group btn-group-toggle">
<button type="button" class="btn btn-orange">旋转：</button>
<button type="button" class="btn btn-orange" onclick="player.rotate(0)">0</button>
<button type="button" class="btn btn-orange" onclick="player.rotate(90)">90</button>
<button type="button" class="btn btn-orange" onclick="player.rotate(180)">180</button>
<button type="button" class="btn btn-orange" onclick="player.rotate(270)">270</button>
</div>2.3、卸载播放器
建议在每次创建播放器前，调用。
if(player){//如果播放器已存在
player.remove();//卸载播放器
}
2.4、监听播放时间进度
使用全局变量暂存播放进度
注：
1）在初始加载播放器，不触发。
2）在播放过程，暂停、拖动进度条等触发
var currentTime= 0;
player.time(function (t) {
currentTime= t;
})2.5、定位播放
player.seek(time);
3、初始化属性说明
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=全屏时才启用
};
4、使用功能一览
参考文档：
ckplayer 官方网站
demo演示
