在微信端使用video标签，播放结束会出现QQ浏览器推荐视频的解决办法（vue）
时间：2017-11-12 17:28:52
收藏：0
阅读：1335
会出现播放结束显示QQ浏览器推荐视频的原因：（我是vue的项目，而且我是新手，只是单纯的给大家分享一个方法，代码比较low请自动忽略）
因为在x5（QQ浏览器）内核中，把video标签劫持了，只要是检测到使用了video标签的话（包括使用了基于h5的video写的插件），就会出现这种情况。
解决办法：
html部分：（需要的是一个id选择器，其他的请忽略，src中的内容是调接口返回）
<video autoplay id="end" controls :src="chapter.url" poster="http://eres.xgstars.com/promote/ed.png"></video>
js部分：
showOtherVideo(){
let _this = this;
setTimeout(function(){
var dom = document.getElementById(‘end‘);
var flag = dom.paused;
if(!flag){
_this.showOtherVideo();
}else{
// _this.showOtherVideo();
if(dom.currentTime == dom.duration && dom.currentTime!=0){
//这里的判断是如果视频的总时间等于视频已经播放的时间，并且视频的播放时间不为零时
//这个地方的就是写视频结束的时候的代码的地方
}else{
_this.showOtherVideo();
}
}
},1000)
},
这个的原理就是通过一个计时器每隔一秒刷新一次，来监听视频是不是播放完毕，如果没有播放完毕则继续监听，如果播放完毕就执行下面的方法，可以调用你自己公司的接口来请求下一段视频，替换当前视频，他会有一秒的闪烁，然后就会跳走，如果先看看效果的话，就去微信浏览器里面看看优酷，他们就是这种效果，但是方法应该不会这么low。
评论（0）