caimei-authentic-www/components/SimpleVideoPlayer/index.vue

<template>
  <div class="simple-video-player">
    <van-popup v-model="show" position="center" :closeable="true">
      <div class="pupup-content">
        <video :src="videoSrc" controls ref="video" class="video"></video>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    videoSrc: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      show: false,
    }
  },
  watch: {
    show(nVal) {
      this.$nextTick(() => {
        nVal ? this.$refs.video.play() : this.$refs.video.pause()
      })
    },
  },
  methods: {
    open() {
      this.show = true
    },
  },
}
</script>

<style scoped lang="scss">
.simple-video-player {
  .pupup-content {
    width: 100vw;
    background: #000;
  }
  .video {
    margin: 0 auto;
    height: 100vh;
  }
}
</style>