ys-app/src/components/mediaPreview.vue

<template>
  <!-- 放大后的遮罩层 -->
  <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" 
          mode="widthFix" 
          class="enlarged-image" 
        />
    </block>
    <view :class="videoClass"  v-else-if="getFileType(mediaUrl)=='video'">
      <!--  object-fit="cover" -->
      <!-- <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({
	visible:{
		type:Boolean
	},
  url:{}//图片路径
})

const isEnlarged = ref(props.visible);
const mediaUrl = ref(props.url);
// const mediaType = ref('');//类型
// 显示隐藏
watch(() => props.visible, (newVal, oldVal) => {
  isEnlarged.value = newVal
},{
    deep:true, // 深度监听
    immediate:true // 立即执行
});

watch(() => props.url, (newVal, oldVal) => {
  mediaUrl.value = newVal;
},{
    deep:true,
    immediate:true
});
const emit = defineEmits(['close'])
const handleClose=()=>{
  emit('close');
}

// 获取视频的宽和高
let videoClass = ref('enlarged-image');
const onVideoLoaded = (e) => {
  // 通过事件对象获取原始宽高[citation:3]
  let w = e.detail.width;
  let h = e.detail.height;
  // 你也可以在这里进行后续操作，比如根据宽高比调整UI
  // console.log(w,h)
  if(h>w){
    videoClass.value="enlarged-image"
  }else{
    videoClass.value="enlarged-image"
  }
};

</script>

<style scoped>
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  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%;
}

.enlarged-image {
  width: 100%;
  height: auto;
}
.enlarged-image2 {
  width:auto;
  height: 100vh;
}
</style>