本文主要是介绍使用ckplayer控制视频播放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
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)//调用播放器并赋值给变量playerplayer.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和seekedif (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演示
这篇关于使用ckplayer控制视频播放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
