chore：微信小程序实现竖屏是竖屏，横屏是横屏

components-diy/diy-video-list.vue

@@ -53,9 +53,19 @@
 
 		<!-- 视频播放弹窗 -->
 		<uni-popup ref="videoPopup" type="center" style="background:transparent;width:100%;height:100%;">
-			<view class="video-container" style="position:fixed;top:30%;width:100%;left:0;">
+			<view class="video-container" :style="popupVideoStyle">
-				<video class="adaptive-video" :autoPauseIfNavigate="true" :autoPauseIfOpenNative="true"
+				<video 
-					:autoplay="false" :enableAutoRotation="true" id="myVideo" :src="video_url" :controls="true"></video>
+					ref="popupVideoRef"
+					class="adaptive-video" 
+					:autoPauseIfNavigate="true" 
+					:autoPauseIfOpenNative="true"
+					:autoplay="false" 
+					:enableAutoRotation="true" 
+					id="myVideo" 
+					:src="video_url" 
+					:controls="true"
+					@loadedmetadata="onPopupVideoLoaded"
+				></video>
 			</view>
 		</uni-popup>
 	</view>
@@ -126,12 +136,38 @@ export default {
 		isIndicatorDots() {
 			return this.value.carousel.type != 'hide' &&
 				1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
+		},
+		
+		// 弹窗视频容器样式
+		popupVideoStyle() {
+			let style = 'position:fixed;width:100%;left:0;';
+			
+			if (this.popupVideoRatio) {
+				// 根据视频比例设置位置
+				if (this.popupVideoRatio === 'portrait') {
+					// 竖屏视频：居中显示，使用9/16比例
+					style += 'top:50%;transform:translateY(-50%);';
+					style += 'aspect-ratio: 9 / 16;';
+				} else {
+					// 横屏视频：靠近顶部显示，使用16/9比例
+					style += 'top:20%;';
+					style += 'aspect-ratio: 16 / 9;';
+				}
+			} else {
+				// 默认：居中显示，使用竖屏比例
+				style += 'top:50%;transform:translateY(-50%);';
+				style += 'aspect-ratio: 9 / 16;';
+			}
+			
+			return style;
 		}
 	},
 	methods: {
 		// 显示视频播放弹窗
 		showVideo(item) {
 			this.video_url = item.videoUrl;
+			// 重置视频比例为null，等待新的检测结果
+			this.popupVideoRatio = null;
 			this.$refs.videoPopup.open();
 		},
 
@@ -139,6 +175,39 @@ export default {
 		imgError(index) {
 			// 图片加载失败的处理逻辑
 			console.log('图片加载失败:', index);
+		},
+		
+		// 弹窗视频加载完成事件
+		onPopupVideoLoaded(event) {
+			this.$nextTick(() => {
+				let width = 0;
+				let height = 0;
+
+				// H5 端：获取真实视频宽高
+				// #ifdef H5
+				const video = this.$refs.popupVideoRef;
+				if (video) {
+					width = video.videoWidth || 0;
+					height = video.videoHeight || 0;
+				}
+				// #endif
+
+				// 微信小程序端：通过事件对象获取视频宽高
+				// #ifdef MP-WEIXIN
+				if (event && event.detail) {
+					width = event.detail.width || 0;
+					height = event.detail.height || 0;
+				}
+				// #endif
+
+				if (width && height) {
+					this.popupVideoRatio = width >= height ? 'landscape' : 'portrait';
+					console.log(`弹窗视频宽高比检测: ${width}x${height}, 比例: ${this.popupVideoRatio}`);
+				} else {
+					// 获取失败，默认竖屏
+					this.popupVideoRatio = 'portrait';
+				}
+			});
 		}
 	}
 }

components-diy/diy-video.vue

@@ -1,8 +1,9 @@
 <template>
-	<view class="video-container">
+	<view class="video-container" :style="containerStyle">
 		<!-- H5端使用原生video标签 -->
 		<!-- #ifdef H5 -->
 		<video 
+			ref="videoRef"
 			data-component-name="diy-video" 
 			class="diy-video h5-video" 
 			:src="getVideoUrl()"
@@ -10,6 +11,7 @@
 			:style="videoWarpCss" 
 			controls
 			preload="auto"
+			@loadedmetadata="onVideoLoaded"
 			@click="handlerClick(getVideoUrl())"
 		></video>
 		<!-- #endif -->
@@ -17,13 +19,15 @@
 		<!-- 微信小程序端使用uni-app的video组件 -->
 		<!-- #ifdef MP-WEIXIN -->
 		<video 
+			ref="videoRef"
 			data-component-name="diy-video" 
 			class="diy-video mp-video" 
 			:src="getVideoUrl()"
 			:poster="$util.img(value.imageUrl)" 
 			:style="videoWarpCss" 
-			objectFit="cover"
+			objectFit="contain"
 			controls
+			@loadedmetadata="onVideoLoaded"
 			@tap="handlerClick(getVideoUrl())"
 		></video>
 		<!-- #endif -->
@@ -41,7 +45,9 @@ export default {
 		}
 	},
 	data() {
-		return {};
+		return {
+			videoRatio: null // 视频比例：'landscape'（横屏）或 'portrait'（竖屏）
+		};
 	},
 	created() { },
 	mixins: [DiyMinx],
@@ -59,6 +65,26 @@ export default {
 				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
 			}
 			return obj;
+		},
+		// 动态计算容器比例
+		containerStyle() {
+			let style = '';
+			
+			if (this.videoRatio) {
+				// 已加载并识别出比例
+				if (this.videoRatio === 'portrait') {
+					// 竖屏视频：9/16比例
+					style += 'aspect-ratio: 9 / 16;';
+				} else {
+					// 横屏视频：16/9比例
+					style += 'aspect-ratio: 16 / 9;';
+				}
+			} else {
+				// 未加载完成 → 默认使用竖屏比例（适合短视频）
+				style += 'aspect-ratio: 9 / 16;';
+			}
+			
+			return style;
 		}
 	},
 	methods: {
@@ -73,6 +99,42 @@ export default {
 			// 否则使用$util.img()处理
 			return this.$util.img(videoUrl);
 		},
+		
+		// 视频加载完成事件
+		onVideoLoaded(event) {
+			this.$nextTick(() => {
+				let width = 0;
+				let height = 0;
+				
+				// H5端：通过video元素获取真实视频宽高
+				// #ifdef H5
+				const video = this.$refs.videoRef;
+				if (video) {
+					width = video.videoWidth || 0;
+					height = video.videoHeight || 0;
+				}
+				// #endif
+				
+				// 微信小程序端：通过事件对象获取视频宽高
+				// #ifdef MP-WEIXIN
+				if (event && event.detail) {
+					width = event.detail.width || 0;
+					height = event.detail.height || 0;
+				}
+				// #endif
+				
+				if (width && height) {
+					// 判断视频方向：宽度 >= 高度为横屏，否则为竖屏
+					this.videoRatio = width >= height ? 'landscape' : 'portrait';
+					console.log(`视频宽高比检测: ${width}x${height}, 比例: ${this.videoRatio}`);
+				} else {
+					// 获取失败，默认竖屏
+					this.videoRatio = 'portrait';
+					console.log('视频宽高比检测失败，默认使用竖屏比例');
+				}
+			});
+		},
+		
 		async handlerClick(videoUrl) {
 			await this.__$emitEvent({
 				eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
@@ -97,28 +159,22 @@ export default {
 	height: 100%;
 }
 
-/* H5端样式 - 横屏 */
+/* H5端样式 */
 /* #ifdef H5 */
-.video-container {
-	aspect-ratio: 16/9;
-}
-
 .h5-video {
 	display: block;
-	object-fit: cover;
+	object-fit: contain; /* 改为contain以保持视频比例 */
+	background-color: #000; /* 添加背景色 */
 }
 /* #endif */
 
-/* 微信小程序端样式 - 竖屏 */
+/* 微信小程序端样式 */
 /* #ifdef MP-WEIXIN */
-.video-container {
-	aspect-ratio: 9/16;
-}
-
 .mp-video {
 	position: absolute;
 	top: 0;
 	left: 0;
+	background-color: #000; /* 添加背景色 */
 }
 
 .mp-video>>>.uni-video-container {

pages_tool/ai-chat/ai-chat-message.vue

@@ -108,11 +108,13 @@
               <view v-else-if="message.type === 'video'" class="video-content">
                 <view class="video-player">
                   <video 
+                    ref="videoRef"
                     :src="message.url" 
                     :poster="message.cover"
                     :controls="true"
                     :autoplay="false"
                     class="video-element"
+                    @loadedmetadata="onVideoLoaded(message, $event)"
                     @play="onVideoPlay(message)"
                     @pause="onVideoPause(message)">
                   </video>
@@ -1225,6 +1227,42 @@ export default {
       }
     },
     
+    // 视频加载完成事件
+    onVideoLoaded(message, event) {
+      this.$nextTick(() => {
+        let width = 0;
+        let height = 0;
+        
+        // H5端：通过video元素获取真实视频宽高
+        // #ifdef H5
+        const video = this.$refs.videoRef;
+        if (video) {
+          width = video.videoWidth || 0;
+          height = video.videoHeight || 0;
+        }
+        // #endif
+        
+        // 微信小程序端：通过事件对象获取视频宽高
+        // #ifdef MP-WEIXIN
+        if (event && event.detail) {
+          width = event.detail.width || 0;
+          height = event.detail.height || 0;
+        }
+        // #endif
+        
+        if (width && height) {
+          // 判断视频方向：宽度 >= 高度为横屏，否则为竖屏
+          const videoRatio = width >= height ? 'landscape' : 'portrait';
+          console.log(`AI聊天视频宽高比检测: ${width}x${height}, 比例: ${videoRatio}`);
+          
+          // 动态设置视频样式
+          // 这里可以添加逻辑来动态调整视频播放器的样式
+          // 例如：message.videoRatio = videoRatio;
+          // 然后在模板中根据message.videoRatio调整样式
+        }
+      });
+    },
+    
     // 视频播放
     onVideoPlay(message) {
       this.$emit('video-play', message)