refactor(diy-video-list): 优化弹窗视频适配逻辑

1. 重构视频比例计算逻辑，改为通过实际宽高计算适配
2. 新增多端适配：H5、微信小程序、鸿蒙元服务
3. 添加视频加载错误捕获与日志输出
4. 调整视频容器样式，统一背景与溢出处理
5. 移除旧的比例状态变量，改用宽高状态存储

components-diy/diy-video-list.vue

@@ -64,7 +64,9 @@
 					id="myVideo" 
 					:src="video_url" 
 					:controls="true"
+					object-fit="contain"
 					@loadedmetadata="onPopupVideoLoaded"
+					@error="onPopupVideoError"
 				></video>
 			</view>
 		</uni-popup>
@@ -88,11 +90,14 @@ export default {
 			pageWidth: '',
 			indicatorDots: false,
 			swiperCurrent: 0,
-			video_url: ''
+			video_url: '',
+			popupVideoWidth: 0,
+			popupVideoHeight: 0,
+			windowWidth: 0
 		}
 	},
 	created() {
-		// 组件创建时的逻辑
+		this.initWindowWidth();
 	},
 	watch: {
 		componentRefresh(newValue) {
@@ -140,24 +145,33 @@ export default {
 		// 弹窗视频容器样式
 		popupVideoStyle() {
 			let style = 'position:fixed;width:100%;left:0;';
-			
+			const defaultRatio = 9 / 16;
-			if (this.popupVideoRatio) {
+
-				// 根据视频比例设置位置
+			let ratio = defaultRatio;
-				if (this.popupVideoRatio === 'portrait') {
+			if (this.popupVideoWidth && this.popupVideoHeight) {
-					// 竖屏视频：居中显示，使用9/16比例
+				ratio = this.popupVideoHeight / this.popupVideoWidth;
-					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;';
 			}
-			
+
+			const isPortrait = ratio > 1;
+
+			if (isPortrait) {
+				style += 'top:50%;transform:translateY(-50%);';
+			} else {
+				style += 'top:20%;';
+			}
+
+			// #ifdef H5
+			style += 'padding-top: ' + (ratio * 100) + '%;';
+			// #endif
+
+			// #ifdef MP-WEIXIN
+			style += 'padding-top: ' + (ratio * 100) + '%;';
+			// #endif
+
+			// #ifdef MP-HARMONY
+			style += 'height: ' + (this.windowWidth * ratio) + 'px;';
+			// #endif
+
 			return style;
 		}
 	},
@@ -165,8 +179,8 @@ export default {
 		// 显示视频播放弹窗
 		showVideo(item) {
 			this.video_url = item.videoUrl;
-			// 重置视频比例为null，等待新的检测结果
+			this.popupVideoWidth = 0;
-			this.popupVideoRatio = null;
+			this.popupVideoHeight = 0;
 			this.$refs.videoPopup.open();
 		},
 
@@ -174,6 +188,16 @@ export default {
 		imgError(index) {
 			// 图片加载失败的处理逻辑
 		},
+
+		// 初始化窗口宽度
+		initWindowWidth() {
+			try {
+				const systemInfo = uni.getSystemInfoSync();
+				this.windowWidth = systemInfo.windowWidth || 375;
+			} catch (e) {
+				this.windowWidth = 375;
+			}
+		},
 		
 		// 弹窗视频加载完成事件
 		onPopupVideoLoaded(event) {
@@ -198,13 +222,24 @@ export default {
 				}
 				// #endif
 
+				// 鸿蒙元服务端：通过事件对象获取视频宽高
+				// #ifdef MP-HARMONY
+				if (event && event.detail) {
+					width = event.detail.width || 0;
+					height = event.detail.height || 0;
+				}
+				// #endif
+
 				if (width && height) {
-					this.popupVideoRatio = width >= height ? 'landscape' : 'portrait';
+					this.popupVideoWidth = width;
-				} else {
+					this.popupVideoHeight = height;
-					// 获取失败，默认竖屏
-					this.popupVideoRatio = 'portrait';
 				}
 			});
+		},
+
+		// 弹窗视频错误事件
+		onPopupVideoError(event) {
+			console.error('Popup video load failed:', event);
 		}
 	}
 }
@@ -576,8 +611,9 @@ export default {
 
 .video-container {
 	width: 100%;
-	height: 300px;
 	position: relative;
+	overflow: hidden;
+	background-color: #000;
 }
 
 .adaptive-video {
@@ -589,6 +625,22 @@ export default {
 	left: 0;
 }
 
+/* #ifdef MP-WEIXIN */
+.adaptive-video {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+/* #endif */
+
+/* #ifdef MP-HARMONY */
+.adaptive-video {
+	position: static;
+	display: block;
+	box-sizing: border-box;
+}
+/* #endif */
+
 .video-nav {
 	padding: 16rpx;
 	box-sizing: border-box;