nuxtProject/components/common/videoDialog.vue

<template>
  <!--  视频播放弹窗 -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    @close="closeVideoDialog"
    @open="openVideoDialog"
    class="course-video-dialog"
    center>
    <video controls :src="videoUrl" class="course-video-box" ref="myVideo"></video>
    <p v-if="footerText">{{footerText}}</p>
  </el-dialog>
</template>

<script>
export default {
  name: "videoDialog",
  props: {
    source: {
      type: String,
      require: true
    },
    footerText: {
      type: String,
    },
    visible: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      title: '',
      show: false,
      videoUrl: '',
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.show = newVal;
      },
      immediate: true
    }
  },
  methods: {
    openVideoDialog() {
      this.videoUrl = this.source;
    },
    closeVideoDialog() {
      this.$refs.myVideo.pause();
      this.$emit('update:visible',false);
      this.videoUrl = "";
    }
  }
}
</script>

<style scoped>

</style>