goelia-ai-admin/src/components/VideoPlayer/index.vue

<template>
  <div class="video-player-container">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="videoTitle"
      width="800px"
      @close="handleClose"
    >
      <video
        ref="videoPlayer"
        class="video-player"
        :src="videoUrl"
        autoplay
        muted
        controls
        controlsList="nodownload"
      >
        您的浏览器不支持 video 标签
      </video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "VideoPlayer",
  props: {
    videoUrl: {
      type: [String, null],
      default: null
    },
    videoTitle: {
      type: [String, null],
      default: "视频播放"
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    show() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const video = this.$refs.videoPlayer;
        if (video) {
          video.muted = false;
        }
      });
    },
    handleClose() {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.pause();
        video.currentTime = 0;
      }
      this.dialogVisible = false;
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.video-player-container {
  .video-player {
    width: 100%;
    height: auto;
    max-height: 70vh;
  }
}
</style>