前段时间开发了一个基于vue的H5短视频页面,要放在公众号栏目中,必须在微信内置浏览器中访问,滑动组件用的vue-awesome-swiper,视频播放用的vue-video-player,上线后个别用户反馈视频播放有问题,点击视频之后自动全屏无法滑动了,我马上找他们复现效果,还真是这样,video标签只要一被点击就会自动全屏,经过反复测试最后断定是Android系统下部分手机才会有这个问题,IOS不会出现问题,经过2天通过的各种找资料,各种改参数,刷完了vue-video-player的issue,全部尝试完了之后还是不行,还是无法阻止开启了x5内核的微信内置浏览器自动劫持video标签,无奈只能用js识别用户的微信浏览器内核,如果不是系统内核就提示用户访问这个页面的时候关闭x5内核。
代码参考链接:https://blog.csdn.net/qq_38051222/article/details/103062927
//使用微信访问,获取代理 var ua = navigator.userAgent; var version = "000000"; var key = "TBS/"; var start = ua.indexOf(key); if (start !== -1) { start = start + key.length; version = ua.substr(start, ua.indexOf(" ", start) - start); } if(version.indexOf("000000") !== -1){ window.location.href = '/h5/pages/index/index'; return; }
微信内置浏览器中访问以下链接:
开启x5内核链接:debugmm.qq.com/?forcex5=true
关闭x5内核链接:debugmm.qq.com/?forcex5=false
开启了x5内核就可以访问debugx5.qq.com,并且会出现菜单项,
如果关闭了x5内核,再访问debugx5.qq.com的时候应该会提示你未开启x5内核,需要手动开启,但是还有一种情况是你点击了关闭x5内核的链接,页面也提示 x5内核状态为false,你访问debugx5.qq.com还是能出现菜单项,那就说明关闭x5内核失败了,这个问题我也很纠结,不知道是什么原因导致的。。。只能备份聊天记录重装微信了。。。
这篇文章就是记录一下短视频业务在微信浏览器下的坑,分享出来帮助其他的开发者兄弟们少走点弯路,早点下班回窝。