video同层级、禁⽤进度条等兼容问题
基于video.js使⽤问题
纯种比熊犬
这些问题都是我项⽬遇到的，我项⽬是视频设置问题点， ⽤户观看时不能点击进度条快进，看过的可快进，遇到问题点会暂停弹出问题，回答正确才能继续观看，回答错误返回上⼀个问题的位置重新观看，并且要记录⽤户观看位置，下次进来提⽰ 是否 要跳转到上次观看的位置，包括pc端和⼿机web端， ⽬前遇到最⼤问题就是测试移动端兼容问题，花了很多时间，稍作总结，总体可以。就是对于浏览器兼容效果还是不能全部兼容，因为video标签实在⽆解，后⾯也尝试换插件试试，⽐如西⽠播放器， 但是经过测试，也没有解决层级问题，我放弃了，下⾯总结少的，如有问题，多多交流。
下⾯问题是基于 video.js开发遇到的
1.禁⽤进度条
要求： ⽤户没看过的不许 点击或拖动 进度条快进， 已看过的部分 可以进⾏拖动或快进
pc端：
正常页⾯： 定时器 + ⿏标点击事件（多⼀个事件是为了防⽌⽤户⼀直点击有问题的那个点）
模拟器：只 ⽤定时器 （监听窗⼝判断，模拟器就解绑⿏标事件，pc就再绑定）
移动端：
只⽤定时器就可以
// 1.绑定事件的处理
// 点击进度条事件--绑定事件
// 初始化时就绑定
window.owner.isBind =true;
document
.getElementsByClassName("vjs-progress-control")[0]
.addEventListener("moudown", window.owner.dot);
document
.
getElementsByClassName("vjs-progress-holder")[0]
.addEventListener("moudown", window.owner.dot);
dot(){
window.owner.isSeek =true;// 标志跳转了
window.owner.oldTime =Cache().currentTime;// 获得上⼀次点击的时间（默认会缓存点击跳转前那个位置时间）},
// 点击事件对应得监听跳转，这个事件⼤约250ms执⾏⼀次
<("timeupdate",function(){
// 如果是点击进度条⽅式跳转到问题点的并且不是移动端模拟器的，这样禁⽌
if(
(that.currentTime()> window.owner.maxTime)&&
window.owner.isSeek &&
!window.owner.isMobile
){
that.currentTime(window.owner.oldTime);// 回到上⼀点
}el{
}
});
// 2.定时器
// 开启时刻 --在播放事件开启
<("play",function(){
window.owner.isSeek =fal;
// 开启进度条禁⽤定时器: 先清除再开启。保证每次只开⼀个
clearInterval(window.owner.timeId1);
window.owner.timeId1 =tInterval(window.owner.timer,300);
});
// 定时器，判断⽤户是否快进或者拖动进度条
timer(){
let curTime =this.player.currentTime();// 当前时间
var apartTime = curTime - window.owner.oldTime;// 当前时间和上次保存的时间差，两者差⼤于2代表是⽤户点击了进度条快进// 如果⼤于最长纪录时间并且不是教师预览，跳回原先学习的位置
if(
apartTime >2&&
curTime > window.owner.maxTime &&
!window.owner.isTeacherPreview
){
this.player.currentTime(window.owner.oldTime);// 重置回点击前位置
}el{
window.owner.oldTime = curTime;// 记录时间
if(curTime > window.owner.maxTime){
window.owner.maxTime = curTime;// 记录最长时间
}
}
},
// mounted 添加监听窗⼝变化
window.owner.isMobiles();// 监听窗⼝变化，判断⽤户是否在pc端使⽤调试模拟器打开页⾯
};
// 判断是否⽤户切换了浏览器的模拟器运⾏，是的话解绑事件，只⽤定时器
isMobiles(){
if(
window.navigator.urAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowr|JUC|Fennec|wOSBrowr|BrowrNG|WebOS|Symbian|Wi ndows Phone)/i
)
){
window.owner.isMobile =true;
if(window.owner.vData.isStudyDown !=1){
window.owner.isBind =fal;
document
.removeEventListener("moudown", window.owner.dot);
document
.getElementsByClassName("vjs-progress-holder")[0]
.removeEventListener("moudown", window.owner.dot);
打印样式
}
console.log("移动端模拟器");
return true;// 移动端
}el{
window.owner.isMobile =fal;
if(window.owner.vData.isStudyDown !=1&&!window.owner.isBind){
document
.getElementsByClassName("vjs-progress-control")[0]
.addEventListener("moudown", window.owner.dot);
document
.getElementsByClassName("vjs-progress-holder")[0]
.addEventListener("moudown", window.owner.dot);
}
console.log("pc端");
return fal;// PC端
}
}
2.跳转播放问题
pc端：
这样就可以
this.player.currentTime(time);// 跳转
移动端：
移动端上⾯⽅法直接跳在 移动端浏览器⽀持不⼀致，qq、微信可以，但是 uc/qq浏览器就不⾏，我们需要先播放，初始化了视频再跳就没问题
解决：
设置⼀个标志位，在 timeupdate 监听跳转， 跳转前先播放视频
clearInterval(window.owner.timeId1);// 先清除定时器
window.owner.oldTime = Number.parInt(this.vData.midVideoStudyLength);
// this.player.currentTime(
// Number.parInt(this.vData.midVideoStudyLength)
//); // 直接跳转，有些移动端浏览器跳转不了，⽐如qq浏览器...
动物书签this.player.play();// 播放
this.skipFlag =true;// 设置可跳转
this.showSkipToast =fal;
// tTimeout(()=> { // 不建议使⽤定时器了，跳转会卡顿
郑和墓// player.currentTime(ctime)
// }, 500)关于孝道的名言
},
/
/ 监听跳转和记录保存
<("timeupdate",function(){
let time = CurrentTime();
localforage.tItem("videoLearnerTime",{
midTime: time,
maxTime: window.owner.maxTime
});// 保存记录
// 跳转
if(window.owner.skipFlag){郑州有什么好玩的地方
that.currentTime(
Number.parInt(window.owner.vData.midVideoStudyLength)
)
;
window.owner.skipFlag =fal;// 跳转了设置fal
}
});
对于跳转时间不准确问题，⽐如跳到2.5s会直接跳到3s，这⾥涉及到帧间距问题，⼤家可以百度⼀下这⽅⾯知识。
3.视频记录保存问题
pc和单页⾯移动端:
在组件销毁时调⽤保存api即可，不过还有⼀种情况，就是刷新和关掉页⾯时保存，这时候我采⽤的⽅法是监听页⾯卸载事件
// 清除定时器
this.showSkipToast =fal;
this.studyAll =fal;
clearTimeout(window.owner.timeId);
clearInterval(window.owner.timeId1);
let time =CurrentTime();
if(time >0){// 保存记录保存当前时间和最⼤观看时间maxTime
this.markVideoStudyLength(parInt(time));
}
if(this.player){
this.player.dispo();// //销毁video实例，避免出现节点不存在但是flash⼀直在执⾏，也避免重新进⼊页⾯video未重新声明
}
},
2.
// 页⾯卸载保存记录--针对pc端，移动端这样体验感不好
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if(e){
}
window.owner.isClo =true;
let time = CurrentTime();
if(time >0){
window.owner.markVideoStudyLength(parInt(time));
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return"关闭提⽰";
};
多页⾯移动端：
多页⾯形式，组件没有调⽤到destory函数， 所以不能在销毁时保存， 并且多页⾯跳到某个页⾯会重刷新页⾯，所以可以使⽤localstorage保存记录， 在timeupdate 中保存，然后再通过⽗组件⽣命周期函数中读取 localstorage的值进⾏保存（根据具体情况定在哪保存，这⾥只是提供思路，因为有的⼈组件调⽤⽅式不太⼀样）
4.video层级问题
职位描述
video标签在某些浏览器中会被劫持，层级最⾼层，⽆法被覆盖，qq，微信，edge,safari没有这个问题，uc/qq浏览器（全屏时会有）等部分会有
这种情况就会影响到在视频播放过程弹出的 问题 弹框，被盖住了
解决思路：这个思路也只能⼤致解决了，因为只适配了qq，微信，edge,safari 这⼏个，其他真没办法
