单纯点击弹出视频代码：

<template>
  <div>
    <button @click="checkVideoFun()">点此观看完整视频</button>
    <!-- 外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗 -->
    <div class="mask" v-if="videoState == true" @click="masksCloseFun"></div>
    <!-- 弹窗 -->
    <div class="videomasks" v-if="videoState == true">
      <!-- 视频：h5的视频播放video -->
      <video :src="videoSrc" controls="controls" autoplay width="100%" height="100%">
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      videoSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11c70c96529b6e6938567ec1aa0910e0.mp4",
      videoState: false,
    };
  },
  methods: {
    bofang() {},
    //点击按钮出现弹窗播放视频
    checkVideoFun() {
      this.videoState = true;
      
    },
    masksCloseFun() {
      this.videoState = false;
    },
  },
};
</script>
<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-color: #000000;
  opacity: 0.6;
}
/* 内容层 z-index要比遮罩大，否则会被遮盖 */
.videomasks {
  max-width: 1200px;
  position: fixed;
  left: 0;
  top: 50%;
  margin-top: -30%;
  z-index: 20;
  /* transform: translate(-50%, -50%); */
}
</style>

效果图：

还有一种需求：

比如进入页面默认播放视频，如果只有一个autopsy属性不行的，必须要加上一个moted静音播放属性，这样才可以实现进入页面自动播放视频

目前h5手机端微信浏览器是不完全支持视频自动播放的，苹果可以通过代码实现进入页面自动播放视频，安卓必须需要用户点击屏幕才能触发自动播放功能，解决办法就是，在手机端视频最好添加控件功能 controls

苹果解决不能自动播放代码：

<video
    autoplay
    class="home_videoH5"
    loop
    controls
    muted
    src="http://xxx"
    id="ckplayer_a1"
    x5-video-player-type="h5"
    preload="metadata"
    playsinline="true"
    webkit-playsinline="true"
    x-webkit-airplay="true"
    x5-video-orientation="portraint"
    x5-video-player-fullscreen="true" 
></video>

 在mounted里面：

document.addEventListener(
      "WeixinJSBridgeReady",
      function () {
        var video = document.getElementById("ckplayer_a1");
        video.play();
      },
      false
    );

video标签的属性：