修改巡检图片视频内容

src/components/mediaPreview.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- 放大后的遮罩层 -->
-  <view v-if="isEnlarged" class="image-preview-overlay"  @click="handleClose">
+  <view v-if="isEnlarged" class="image-preview-overlay">
+    <view class="image-preview-close"   @click="handleClose">
+      <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
+    </view>
     <block v-if="getFileType(mediaUrl)=='image'">
         <image 
           :src="mediaUrl" 
@@ -10,12 +13,24 @@
     </block>
     <view :class="videoClass"  v-else-if="getFileType(mediaUrl)=='video'">
       <!--  object-fit="cover" -->
-        <video :src="mediaUrl" controls  @loadedmetadata="onVideoLoaded"></video>
+      <!-- <video :src="mediaUrl" controls  @loadedmetadata="onVideoLoaded"></video> -->
+      <!-- 
+      src: '' // 视频地址
+      autoplay: false // 是否自动播放
+      loop: false // 是否循环播放
+      controls: false // 是否显示控制栏
+      muted: false // 是否静音
+      isLoading: false // Android系统加载时显示loading(为了遮挡安卓的黑色按钮)
+      objectFit: 'contain' // 视频尺寸与video区域的适应模式
+      poster: '' // 视频封面
+      -->
+      <DomVideoPlayer :src="mediaUrl" controls autoplay />
     </view>
   </view>
 </template>
 
 <script setup>
+import DomVideoPlayer from 'uniapp-video-player'
 import { ref,watch } from 'vue';
 import {getFileType} from '@/utils/common.js';
 const props = defineProps({
@@ -54,7 +69,7 @@ const onVideoLoaded = (e) => {
   let w = e.detail.width;
   let h = e.detail.height;
   // 你也可以在这里进行后续操作，比如根据宽高比调整UI
-  console.log(w,h)
+  // console.log(w,h)
   if(h>w){
     videoClass.value="enlarged-image"
   }else{
@@ -77,6 +92,21 @@ const onVideoLoaded = (e) => {
   align-items: center;
   z-index: 10000;
 }
+.image-preview-overlay .image-preview-close{
+  position: absolute;
+  width:50rpx;
+  height:50rpx;
+  line-height: 50rpx;
+  text-align: center;
+  border-radius: 50%;
+  right:20rpx;
+  top:20rpx;
+  /* #ifdef APP-PLUS */
+  top:44rpx;
+  /* #endif */
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
 
 :deep(uni-video){
   width:100%;