vue-video-player插件在微信浏览器X5内核中的坑

Posted 2020-12-15 伤心的瘦子

前段时间开发了一个基于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内核失败了，这个问题我也很纠结，不知道是什么原因导致的。。。只能备份聊天记录重装微信了。。。

 

 

这篇文章就是记录一下短视频业务在微信浏览器下的坑，分享出来帮助其他的开发者兄弟们少走点弯路，早点下班回窝。