nuxtProject/components/course/course-video.vue

<template>
  <div class="video-container">

    <div class="video-box">
      <span>
        <img :src="imgUrl" :alt="title">
        <i @click="playVideo"></i>
      </span>
      <p>{{ title }}</p>
    </div>

    <!--  视频播放弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="videoDialogFlag"
      @close="closeVideoDialog"
      class="course-video-dialog"
      center>
      <video controls :src="curSource" class="course-video-box"></video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "course-video",
  props: {
    source: {
      type: String,
      require: '',
    },
    title: {
      type: String,
      default: ''
    },
    dialogTitle: {
      type: String,
      default: ''
    },
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      videoDialogFlag: false,
      curSource: '',
    }
  },
  methods: {
    closeVideoDialog() {
      this.videoDialogFlag = false;
      this.curSource = "";
    },
    playVideo() {
      this.videoDialogFlag = true;
      this.curSource = this.source;
    }
  }
}
</script>

<style lang="scss" scoped>
.video-container {
  width: 380px;
  height: 280px;

  .video-box {
    text-align: center;
    > span {
      position: relative;
      display: inline-block;
    }
    p {
      height: 23px;
      font-size: 24px;
      font-weight: 400;
      color: #333333;
    }

    i:hover {
      background-image: url("~static/images/client/course/course-video-icon-a.svg");
      background-size: cover;
      background-position: bottom;
    }

    i {
      width: 48px;
      height: 48px;
      cursor: pointer;
      background-image: url("~static/images/client/course/course-video-icon.svg");
      display: inline-block;
      position: absolute;
      left: 50%;
      margin-left: -24px;
      z-index: 5;
      top: 50%;
      margin-top: -24px;
      background-size: cover;
      background-position: bottom;
      transition: all 0.5s;
    }

    img {
      width: 100%;
    }

  }
}
</style>