JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_fix：测试视频

src/components/image-preview/i-video.vue

@@ -0,0 +1,86 @@
+<template>
+	<view
+	  v-html="videoHtml"
+	  id="dom-video"
+	  class="dom-video"
+	/>
+</template>
+
+<script>
+	export default {
+		name: "sqVideo",
+		props: {
+			src: {
+				type: String,
+				required: true
+			},
+			controls: {
+				type: Boolean,
+				default: false
+			},
+			autoplay: {
+				type: Boolean,
+				default: false
+			},
+			muted: {
+				type: Boolean,
+				default: false
+			},
+			width: {
+				type: String,
+				default: '100%'
+			},
+			height: {
+				type: String,
+				default: 'auto'
+			},
+			borderRadius: {
+				type: String,
+				default: '0px'
+			},
+			loop: {
+				type: Boolean,
+				default: false
+			},
+			poster: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				videoHtml:'',
+				randomStr: Math.floor(Math.random() * 1000) + '-' + Math.floor(Math.random() * 1000)
+			}
+		},
+		mounted() {
+			this.initVideoHtml()
+		},
+		methods: {
+			// 初始化视频
+			initVideoHtml() {
+				this.videoHtml = `<video
+			      src="${this.src}"
+			      id="dom-html-video_${this.randomNum}"
+			      class="dom-html-video"
+			      ${this.autoplay ? 'autoplay' : ''}
+			      ${this.loop ? 'loop' : ''}
+			      ${this.controls ? 'controls' : ''}
+			      ${this.muted ? 'muted' : ''}
+			      ${this.poster ? 'poster="' + this.poster + '"' : ''}
+			      preload="auto"
+			      playsinline
+			      webkit-playsinline
+			      width="100%"
+			      height="100%"
+			      style="object-fit: contain;padding:0;border-radius:${this.borderRadius}"
+			    >
+			      <source src="${this.src}" type="video/mp4">
+			      <source src="${this.src}" type="video/ogg">
+			      <source src="${this.src}" type="video/webm">
+			    </video>
+			  `
+			},
+		}
+	}
+</script>

src/components/image-preview/preview-detail.vue

@@ -1,12 +1,15 @@
 <template>
 	<uni-popup ref="PopupRef" class="popup" mask-background-color="rgba(0,0,0,.2)" @change="changeShow">
 		<view class="overlay-box" @click="playEnded" v-if="fileType === 'video'">
-			<video class="video-cont-center" :id="`video`+ fileId" ref="playerRef" v-if="showModel && fileUrlShow"
+			<video class="video-cont-center" :id="`video`+ fileId" ref="playerRef" v-if="fileUrlShow"
 				:src="fileUrlShow"
 				:header="{
 					summary: token
 				}"
 				:controls="true" @error="playError" @ended="playEnded" object-fit="contain"></video>
+			<IVideo class="video-cont-bottom" :id="`ivideo`+ fileId" ref="iplayerRef"
+				:src="fileUrlShow"
+				:controls="true"></IVideo>
 		</view>
 		<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'image'">
 			<movable-area scale-area class="detail-movable">
@@ -46,10 +49,12 @@
 	import {
 		getToken
 	} from '@/common/common.js'
+	import IVideo from './i-video.vue'
 	export default {
 		name: "video-preview",
 		components: {
-			imagePreviewVue
+			imagePreviewVue,
+			IVideo
 		},
 		props: {
 			// fileId:{
@@ -323,6 +328,14 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
+	.overlay-box .video-cont-bottoom {
+		width: 100vw;
+		max-height: 100%;
+		position: absolute;
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
 
 	.overlay-box {
 		position: fixed;