sl-sfy-safety/src/components/VideoPlayer/VideoPlayer.vue

<template>
  <div>
    <div v-if="videoPauseShow" class="video-mask" @click="handlePlayVideo">
      <el-icon class="video-mask-play" :size="iconSize"><VideoPlay /></el-icon>
    </div>
    <video
      ref="videoRef"
      :key="videoUrl"
      type="video/mp4"
      :muted="muted"
      :preload="preload"
      :controls="controls"
      disablepictureinpicture
      :style="{ objectFit: 'contain', width: '100%', height: videoHeight }"
      @pause="handlePauseVideo"
      @play="handlePlayVideo"
    >
      <source :src="videoUrl" />
    </video>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { ElIcon } from 'element-plus';
  import { VideoPlay } from '@element-plus/icons-vue';

  const props = defineProps({
    videoUrl: {
      type: String,
      required: true,
    },
    iconSize: {
      type: Number,
      default: 140,
    },
    controls: {
      type: Boolean,
      default: true,
    },
    muted: {
      type: Boolean,
      default: true,
    },
    preload: {
      type: String,
      default: 'auto',
    },
    videoHeight: {
      type: String,
      default: '432px',
    },
  });

  const videoRef = ref(null);
  const videoPauseShow = ref(true);

  const handlePlayVideo = () => {
    videoPauseShow.value = false;
    if (videoRef.value) {
      videoRef.value.play();
    }
  };

  const handlePauseVideo = () => {
    videoPauseShow.value = true;
    if (videoRef.value) {
      videoRef.value.pause();
    }
  };
</script>

<style scoped>
  .video-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 1;
  }

  .video-mask-play {
    cursor: pointer;
  }

  .video-mask-play:hover {
    animation: warn 1.5s ease-out infinite;
  }

  @keyframes warn {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
</style>