2023年6月28日发(作者：)

video同层级、禁⽤进度条等兼容问题基于使⽤问题这些问题都是我项⽬遇到的，我项⽬是视频设置问题点， ⽤户观看时不能点击进度条快进，看过的可快进，遇到问题点会暂停弹出问题，回答正确才能继续观看，回答错误返回上⼀个问题的位置重新观看，并且要记录⽤户观看位置，下次进来提⽰ 是否 要跳转到上次观看的位置，包括pc端和⼿机web端， ⽬前遇到最⼤问题就是测试移动端兼容问题，花了很多时间，稍作总结，总体可以。就是对于浏览器兼容效果还是不能全部兼容，因为video标签实在⽆解，后⾯也尝试换插件试试，⽐如西⽠播放器， 但是经过测试，也没有解决层级问题，我放弃了，下⾯总结少的，如有问题，多多交流。下⾯问题是基于 开发遇到的1.禁⽤进度条要求： ⽤户没看过的不许 点击或拖动 进度条快进， 已看过的部分 可以进⾏拖动或快进pc端：正常页⾯： 定时器 + ⿏标点击事件（多⼀个事件是为了防⽌⽤户⼀直点击有问题的那个点）模拟器：只 ⽤定时器 （监听窗⼝判断，模拟器就解绑⿏标事件，pc就再绑定）移动端：只⽤定时器就可以// 1.绑定事件的处理 //

点击进度条事件--绑定事件 //

初始化时就绑定

= true; document .getElementsByClassName("vjs-progress-control")[0] .addEventListener("mousedown", ); document .getElementsByClassName("vjs-progress-holder")[0] .addEventListener("mousedown", );

dot() { = true;//

标志跳转了 e = he().currentTime; //

获得上⼀次点击

的时间（默认会缓存点击跳转前那个位置时间） },

//

点击事件对应得监听

跳转

，这个事件⼤约250ms执⾏⼀次 ("timeupdate", function() { //

如果是点击进度条⽅式跳转到问题点的并且不是移动端模拟器的，这样禁⽌ if ( (tTime() > e) && && !le ) { tTime(e); //

回到上⼀点 } else { } });

// 2.定时器 //

开启时刻 --在播放事件开启 ("play", function() { = false; //

开启进度条禁⽤定时器:

先清除再开启。保证每次只开⼀个 clearInterval(1); 1 = setInterval(, 300); }); //

定时器,判断⽤户是否快进或者拖动进度条 timer() { let curTime = tTime(); //

当前时间 var apartTime = curTime - e; //

当前时间和

上次保存的时间差

，两者差⼤于2代表是⽤户点击了

进度条

快进 //

如果⼤于最长纪录时间并且不是教师预览，跳回原先学习的位置 if ( apartTime > 2 && curTime > e && !herPreview ) { tTime(e); //

重置回点击前位置 } else { e = curTime; //

记录时间 if (curTime > e) { e = curTime; //

记录最长时间 } } },// mounted

添加

监听窗⼝变化ze = function() { les(); //

监听窗⼝变化，判断⽤户是否在pc端使⽤

调试模拟器打开页⾯ };

//

判断是否⽤户切换了浏览器的模拟器运⾏，是的话解绑事件，只⽤定时器 isMobiles() { if ( ( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) ) { le = true; if (yDown != 1) { = false; document .getElementsByClassName("vjs-progress-control")[0] .removeEventListener("mousedown", ); document .getElementsByClassName("vjs-progress-holder")[0] .removeEventListener("mousedown", ); } ("移动端模拟器"); return true; //

移动端 } else { le = false; if (yDown != 1 && !) { document .getElementsByClassName("vjs-progress-control")[0] .addEventListener("mousedown", ); document .getElementsByClassName("vjs-progress-holder")[0] .addEventListener("mousedown", ); } ("pc端"); return false; // PC端 } }2.跳转播放问题pc端：这样就可以tTime(time); //

跳转移动端：移动端上⾯⽅法直接跳在 移动端浏览器⽀持不⼀致，qq、微信可以，但是 uc/qq浏览器就不⾏，我们需要先播放，初始化了视频再跳就没问题解决：设置⼀个标志位，在 timeupdate 监听跳转， 跳转前先播放视频 //

跳转播放 handleSkip() { clearInterval(1); //

先清除定时器 e = nt(eoStudyLength); // tTime( // nt(eoStudyLength) //); //

直接跳转，有些移动端浏览器跳转不了，⽐如qq浏览器... (); //

播放 ag = true; //

设置可跳转 ipToast = false; // setTimeout(()=> { //

不建议使⽤定时器了，跳转会卡顿 // tTime(ctime) // }, 500) },

//

监听跳转和记录保存 ("timeupdate", function() { let time = rentTime(); m("videoLearnerTime", { midTime: time, maxTime: e }); //

保存记录 //

跳转 if (ag) { tTime( nt(eoStudyLength) ); ag = false;//

跳转了设置false } });对于跳转时间不准确问题，⽐如跳到2.5s会直接跳到3s,这⾥涉及到帧间距问题，⼤家可以百度⼀下这⽅⾯知识。3.视频记录保存问题pc和单页⾯移动端:在组件销毁时调⽤保存api即可，不过还有⼀种情况，就是刷新和关掉页⾯时保存，这时候我采⽤的⽅法是监听页⾯卸载事件1.页⾯销毁beforeDestroy() { reunload = null; //

清除定时器 ipToast = false; ll = false; clearTimeout(); clearInterval(1); let time = rentTime(); if (time > 0) { //

保存记录

保存当前时间和最⼤观看时间maxTime deoStudyLength(parseInt(time)); } if () { e(); // //销毁video实例，避免出现节点不存在

但是flash⼀直在执⾏,也避免重新进⼊页⾯video未重新声明 } },

2.//

页⾯卸载保存记录--针对pc端，移动端这样体验感不好 reunload = function(e) { e = e || ; //

兼容IE8和Firefox 4之前的版本 if (e) { Value = "关闭提⽰"; } e = true; let time = rentTime(); if (time > 0) { deoStudyLength(parseInt(time)); } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return "关闭提⽰"; };多页⾯移动端：多页⾯形式，组件没有调⽤到destory函数， 所以不能在销毁时保存， 并且多页⾯跳到某个页⾯会重刷新页⾯，所以可以使⽤localstorage保存记录， 在timeupdate 中保存，然后再通过⽗组件⽣命周期函数中读取 localstorage的值进⾏保存（根据具体情况定在哪保存，这⾥只是提供思路，因为有的⼈组件调⽤⽅式不太⼀样）层级问题video标签在某些浏览器中会被劫持，层级最⾼层，⽆法被覆盖，qq,微信，edge,safari没有这个问题，uc/qq浏览器（全屏时会有）等部分会有这种情况就会影响到在视频播放过程弹出的 问题 弹框，被盖住了解决思路：这个思路也只能⼤致解决了，因为只适配了qq,微信，edge,safari 这⼏个，其他真没办法1. 添加属性,设置⽀持x-h5内核的浏览器 同层，⾏内播放视频2. 通过隐藏元素标签，在遇到弹框时就设置 video标签的⽗标签 display:none, 弹框取消再设置回来block 1.

⼀些样式设置样式设置// 暂停显⽰⼤按钮::v-deep .vjs-paused .vjs-big-play-button,::v-deep .-has-started .vjs-big-play-button { display: block; font-size: 3.5em;}// 正向播放，显⽰已播放时长::v-deep .video-js .vjs-time-control { display: block;}::v-deep .video-js .vjs-remaining-time { display: none;}::v-deep .vjs-control-bar { font-size: 14px;}//5.暂停会出现⿊边给video标签加style=" outline：none"5.⼀些事件执⾏顺序⼀些事件触发顺序：timeupdate这个只要视频播放，有改变播放时间都会触发,⼤概205ms执⾏⼀次1.正常播放play - timeupdate - pause2.正常播放时点击进度条快进到另⼀个位置 （快退也⼀样过程）播放时间改变–暂停–pause寻找中 --seeking播放时间改变–timeupdate寻找完毕–seeked播放时间改变–timeupdate播放时间改变–timeupdate开始播放：–打印过程：播放时间改变:?9818:48 暂停 ?9818:55 寻找中:?9818:63 播放时间改变:?9818:59 寻找完毕:?9818:63 播放时间改变:?9818:63 播放时间改变:?9818:51 开始播放：play :36.8560773.暂停时点击进度条快进（少了开头暂停和结尾播放）寻找中播放时间改变寻找完毕播放时间改变播放时间改变4. 拖动进度条（差不多，只是寻址过程会被多次触发）暂停–pause寻找中 --seeking （这3个会多次触发）播放时间改变–timeupdate寻找完毕–seeked播放时间改变–timeupdate播放时间改变–timeupdate开始播放：–playend:⼤概稍微总结这么多，笔记可以做的不是很好，有问题可以交流哈