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"
          :style="{ height: videoHeight }"
        ></video>
        <div class="desc" v-if="description">{{ description }}</div>
      </div>
    </van-popup>
  </div>
</template>

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

<style scoped lang="scss">
@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

.simple-video-player {
  .pupup-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
  }
  .video {
    margin: 0 auto;
    height: 92vh;
  }

  @media screen and (min-width: 768px) {
    .desc {
      position: absolute;
      height: 48px;
      left: 0;
      bottom: 16px;
      padding: 0 32px;
      line-height: 24px;
      font-size: 14px;
      color: #fff;
      box-sizing: border-box;
      background: rgba(0, 0, 0, 0.5);
      text-align: justify;
      @include ellipsis(2);
    }
  }

  @media screen and (max-width: 768px) {
    .desc {
      position: absolute;
      height: 10.4vw;
      left: 0;
      bottom: 4vw;
      padding: 0 4vw;
      line-height: 5.2vw;
      font-size: 3.2vw;
      color: #fff;
      box-sizing: border-box;
      background: rgba(0, 0, 0, 0.5);
      text-align: justify;
      @include ellipsis(2);
    }
  }
}
</style>