基于el 封装的el-video

<template>
  <div class="el-show-video">
    <img class="el-video-play-preview" :src="props.previewSrc" :style="iconStyle" />
    <div class="el-video-name" :style="{ width: iconStyle.width }">
      <span>{{ props.title }}</span>
    </div>
    <div class="el-mask" :style="iconStyle">
      <el-icon size="40" class="el-play-icon" @click="playVideo = true">
        <VideoPlay />
      </el-icon>
    </div>
    <el-dialog class="el-video-dialog" v-model="playVideo">
      <template #header="{ titleId }">
        <div class="el-header">
          <span :id="titleId">{{ props.title }}</span>
        </div>
      </template>
      <div class="el-video">
        <video width="1200" autoplay muted :src="props.videoSrc" controls disablepictureinpicture></video>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { VideoPlay } from '@element-plus/icons-vue'
let props = defineProps({
  title: String,
  previewSrc: String,
  videoSrc: String,
  width: Number,
  height: Number,
});
let iconStyle: any = {};
if (props.height) {
  iconStyle.height = props.height + "px !important";
}
if (props.width) {
  iconStyle.width = props.width + "px !important";
}
const playVideo = ref(false);
</script>
<style lang="scss">
.el-show-video {
  .el-video-dialog {
    width: fit-content !important;
    .el-dialog__body {
      padding: 5px;
    }
  }
}
</style>
<style scoped lang="scss">
.el-show-video {
  display: flex;
  flex-direction: column;
  position: relative;
  .el-video-play-preview {
    height: 200px;
    width: 300px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }
  .el-video-name {
    height: 30px;
    width: 300px;
    padding: 0 10px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: inherit;
      font-size: inherit;
      opacity: 0.8;
    }
  }
  .el-mask {
    height: 200px;
    width: 300px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    .el-play-icon {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s, visibility 0.5s;
    }
    &:hover .el-play-icon {
      opacity: 1;
      visibility: visible;
      cursor: pointer;
    }
  }
  .el-video-dialog {
    .el-header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 20px;
      width: 400px;
      span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: inherit;
        font-size: inherit;
      }
    }
    .el-video {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>