在微信里打开网页，video视频出现问题，video.js插件解决

在调试的过程中，发现电脑端，手机端在谷歌中打开是没有问题的。但是在微信里打开页面出现问题。 分析：微信自带的内嵌浏览器是X5内核，而谷歌的内核是Webkit，video在X5内核里有兼容性的问题。 通过https://juejin.cn/post/6844903825002725383#heading-3博客发现可以解决ios的兼容性问题：

document.addEventListener(

"WeixinJSBridgeReady",

() => {

this.video.play();

},

false

); // 兼容微信自动播放

但是android的还是不兼容。经过不断尝试和发现，找到了一个比较好的框架video.js插件： 参考文章：https://juejin.cn/post/6844903975766982663

解决办法： 备注：微信自带的浏览器内核是x5，由于自带的安全机制，不能让其自动播放，所以必须要加上底部控制栏，用来控制它的播放和暂停。 1.安装

npm install --save video.js

2.main.js中引入

import Video from "video.js";

import "video.js/dist/video-js.min.css"

Vue.prototype.$video = Video

3.在组件中使用。在video标签里的class里加入vjs-big-play-centered可以使播放按钮居中显示。