feat: 违规问题视频播放交互优化

src/components/VideoPlayer/VideoPlayer.vue

@@ -0,0 +1,107 @@
+<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>

src/views/datamanager/alertformdata/components/common/SwiperThumbsGallery.vue

@@ -16,17 +16,7 @@
           <img :src="item.url" alt="" @click="handleOpenPicViewer(index)" />
         </template>
         <template v-else-if="item.type === 'video'">
-          <video
-            type="video/mp4"
-            muted="true"
-            preload="auto"
-            :controls="true"
-            disablepictureinpicture
-            style="object-fit: contain; width: 100%; height: 432px"
-            :key="item.url"
-          >
-            <source :src="item.url" />
-          </video>
+          <VideoPlayer :video-url="item.url" />
         </template>
       </swiper-slide>
     </swiper>
@@ -41,17 +31,8 @@
     >
       <swiper-slide class="slide" v-for="(item, index) in fileList" :key="index">
         <img :src="item.url" alt="" v-if="item.type === 'image'" />
-        <div v-else-if="item.type === 'video'" style="pointer-events: none">
-          <video
-            type="video/mp4"
-            muted="true"
-            :key="item.url"
-            preload="auto"
-            disablepictureinpicture
-            style="object-fit: contain"
-          >
-            <source :src="item.url" />
-          </video>
+        <div v-else-if="item.type === 'video'" style="pointer-events: none; position: relative; height: 100%">
+          <VideoPlayer :video-url="item.url" :icon-size="40" :controls="false" :video-height="88" />
         </div>
       </swiper-slide>
     </swiper>
@@ -74,6 +55,7 @@
   import 'swiper/css/navigation';
   import 'swiper/css/thumbs';
   import { useCurImgVideoUrlStore } from '../../store/useCurImgVideoUrl';
+  import VideoPlayer from '@/components/VideoPlayer/VideoPlayer.vue';
 
   const curImgVideoUrl = useCurImgVideoUrlStore();
   const { detailPictures, detailVideos } = storeToRefs(curImgVideoUrl);