场景：
实现一个培训视频网站，可以限制快进，弹出题目，记录缓存时间，主要使用ckpalyer的X3软件包
- 基本功能：基本视频播放
- 定制功能：弹出题目，限制快进拖动
参考的开发文档：
ckpalyer官网 ：下载源码
https://www.ckplayer.com/manual/
解压获取js文件，在html中引入
实现须知
1. 主要实现配置文件：
//全局变量：播放器默认配置，在外部传递过来相应配置后，则进行相关替换
this.varsDefault = {
playerID: '',//播放器ID
container: '',//视频容器的ID
variable: 'ckplayer',//播放函数(变量)名称
volume: 0.8,//默认音量，范围0-1
poster: '',//封面图片地址
autoplay: false,//是否自动播放
loop: false,//是否需要循环播放
live: false,//是否是直播
duration: 0,//指定总时间
forceduration:0,//强制使用该时间为总时间
seek: 0,//默认需要跳转的秒数
drag: '',//拖动时支持的前置参数
front: '',//前一集按钮动作
next: '',//下一集按钮动作
loaded: '',//加载播放器后调用的函数
flashplayer: false,//设置成true则强制使用flashplayer
html5m3u8: false,//PC平台上是否使用h5播放器播放m3u8
track: null,//字幕轨道
cktrack: null,//ck字幕
cktrackdelay:0,//字幕显示延迟时间
preview: null,//预览图片对象
prompt: null,//提示点功能
video: null,//视频地址
config: '',//调用配置函数名称
type: '',//视频格式
crossorigin: '',//设置html5视频的crossOrigin属性
crossdomain: '',//安全策略文件地址
unescape: false,//默认flashplayer里需要解码
mobileCkControls: false,//移动端h5显示控制栏
mobileAutoFull: true,//移动端是否默认全屏播放
playbackrate: 1,//默认倍速
h5container: '',//h5环境中使用自定义容器
debug: false,//是否开启调试模式
overspread:true,//是否让视频铺满播放器
language:'',//语言文件路径
style:'',//风格文件路径
};
2. 项目主要用到的加载视频方法
// 加载视频
playVideoInstall(seekTime) {
if(this.player){//如果播放器已存在
this.player.remove();//卸载播放器
}
this.player = null;
const videoObject = {
container: "#videoInstall",
height: "100%",
width: "100%",
volume: 0.8,
seek: seekTime,
cookie: "abcdefg", //cookie名称,请在同一域中保持唯一
poster: "", //封面图片地址
smallWindows: true,
html5m3u8:true,
plug:'hls.js',
video:'http://172.16.44.49/kkk/index.m3u8', //视频地址
playbackrateOpen: false, //倍速
stopDblclick: true, //取消双击全屏--自定义配置
timeScheduleAdjust: 5,
loaded: "loadHandler",
menu: [
{
title: "添加课程",
javascript: "addTopic"
}
]
};
// eslint-disable-next-line no-undef
var player = new ckplayer(videoObject);
this.player = player;
// 添加右键事件
window.addTopic = this.addTopic;
// 弹出题目
this.player.time((obj) => {
this.questionTempList.forEach((item) => {
if (Math.trunc(obj) == item.time) {
this.questionObj = item;
this.player.pause();
this.eleLayer = this.player.layer(".elementtemp", false); //添加一个层到播放器中
this.player.bar(false);
}
});
});
// 监听到暂停
this.player.pause(() => {
this.updateprocessFn(Math.trunc(this.player.time()));
});
// 视频播放已结束
this.player.addListener("ended", () => {
this.updateprocessFn(Math.trunc(this.player.time()));
});
},
功能配置拆解---------------------------------------------------------------------
3.初始化配置
var player = new ckplayer(videoObject);
4.切换视频---组件化视频组件，通过监听传入的参数，执行初始化函数
watch: {
videoObj(value) {
this.playVideoInstall(value);
}
},
5.弹出题目
- 组件中添加 elementtemp 元素，
<div class="VideoContent">
<div id="videoInstall" :style="`height: ${height};`"></div>
<div class="elementtemp" @dblclick.stop="addTopic">
<VideoPopup @closeEle="closeEle" :questionObj="questionObj" />
</div>
</div>
.elementtemp {
left: calc(50% - 15vw);
top: calc(40% - 15vh);
line-height: 50px;
background-color: #fff;
width: 30vw;
font-size: 12px;
cursor: pointer;
display: none;
}
- 监听视频播放秒数，添加弹窗
// 弹出题目
this.player.time((obj) => {
this.questionTempList.forEach((item) => {
if (Math.trunc(obj) == item.time) {
this.questionObj = item;
this.player.pause();
this.eleLayer = this.player.layer(".elementtemp", false); //添加一个层到播放器中
this.player.bar(false);
}
});
});
- 关闭弹窗
closeEle() {
this.player.closeLayer(this.eleLayer); //关闭层
this.player.bar(true); //隐藏控制栏
// 过滤已经答题的
this.questionTempList = this.questionTempList.filter(
(item) => item.questionId !== this.questionObj.questionId
);
this.player.play();
},
- 禁用弹出题目后双击事件 ---自定义配置-- 修改ckpalyer.js文件
stopDblclick: true, //取消双击全屏--自定义配置
6.限制拖动视频，缓存看过的时间
- 从接口获取看过的时间，可以是秒数
//获取进度
getprocessFn(value) {
return onlineLearnVideoApi
.getJdById({
params: {
spid: value.kjrid,
pxid: pxid
}
})
.then((res) => {
this.playVideoInstall(res.result || 0);
});
},
2.更新秒数-监听视频的暂停，开始播放，组件销毁
// 监听到暂停
this.player.pause(() => {
this.updateprocessFn(Math.trunc(this.player.time()));
});
// 视频播放已结束
this.player.addListener("ended", () => {
this.updateprocessFn(Math.trunc(this.player.time()));
});
//组件销毁
beforeDestroy() {
this.updateprocessFn(Math.trunc(this.player.time()));
this.player.pause();
this.player = null;
},
2.修改ckpalyer.js文件,限制拖动和快进缓存时间冲突解决
timeScheduleAdjust:5,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
初始化时，seeking事件执行时，去掉限制拖动
7. 点击播放后快进，不能拖动没看过的视频
8.支持m3u8格式视频播放
使用hls插件
plug:'hls.js',
