在微信里打开网页，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可以使播放按钮居中显示。

<template>
  <div class="video_box">
    <video ref="videoPlayer" class="video-js" poster="../../../assets/logo.png">
      <source
        src="../../../../public/static/video/test1.mp4"
        type="video/mp4"
      />
    </video>
  </div>
</template>

<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      player: null
    };
  },
  mounted() {
    // 播放参数
    let options = {
      controls: true, // 是否显示底部控制栏
      preload: "auto", // 加载<video>标签后是否加载视频
      autoplay: "muted", // 静音播放
       // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
       //width: "640",
       //height: "247",
      controlBar: {
        // 自定义按钮的位置
        children: [
          {
            name: "playToggle"
          },
          {
            name: "progressControl"
          },
          {
            name: "currentTimeDisplay"
          },
          {
            name: "timeDivider"
          },
          {
            name: "durationDisplay"
          },

          {
            name: "volumePanel", // 音量调整方式横线条变为竖线条
            inline: false
          },
          // {
          //    name: "pictureInPictureToggle" //画中画播放模式
          // },
          {
            name: "fullscreenToggle"
          }
        ]
      }
    };
    this.player = this.$video(this.$refs.videoPlayer, options,function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
  }
};
</script>

<style scoped>
.video_box {
  margin: 10px;
  width: 99%;
  height: 450px;
}
.video-js {
  width: 100%;
  height: 450px;
}
</style>