fix(diy-video): 适配鸿蒙元服务端视频组件展示

1. 新增鸿蒙平台专属video组件渲染分支
2. 新增窗口宽度初始化逻辑用于计算鸿蒙视频高度
3. 针对不同平台调整视频容器样式计算逻辑
4. 补充视频加载元数据和错误回调
5. 修复微信小程序视频比例适配逻辑

components-diy/diy-video.vue

@@ -26,6 +26,23 @@
 			:poster="posterUrl"
 			:style="videoWarpCss"
 			controls
+			object-fit="cover"
+			@loadedmetadata="onVideoLoaded"
+			@error="onVideoError"
+		></video>
+		<!-- #endif -->
+
+		<!-- 鸿蒙元服务端使用uni-app的video组件 -->
+		<!-- #ifdef MP-HARMONY -->
+		<video
+			ref="videoRef"
+			data-component-name="diy-video"
+			class="diy-video harmony-video"
+			:src="videoUrl"
+			:poster="posterUrl"
+			:style="videoWarpCss"
+			controls
+			object-fit="cover"
 			@loadedmetadata="onVideoLoaded"
 			@error="onVideoError"
 		></video>
@@ -45,13 +62,15 @@ export default {
 	},
 	data() {
 		return {
-			videoRatio: null, // 视频比例：'landscape'（横屏）或 'portrait'（竖屏）
+			videoRatio: null,
 			videoUrl: '',
-			posterUrl: ''
+			posterUrl: '',
+			windowWidth: 0
 		};
 	},
 	created() {
 		this.initVideoData();
+		this.initWindowWidth();
 	},
 	mixins: [DiyMinx],
 	watch: {
@@ -79,18 +98,43 @@ export default {
 		containerStyle() {
 			let style = '';
 
+			// #ifdef H5
 			if (this.videoRatio === 'landscape') {
-				// 横屏视频：16/9比例
 				style += 'aspect-ratio: 16 / 9;';
 			} else if (this.videoRatio === 'portrait') {
-				// 竖屏视频：9/16比例
 				style += 'aspect-ratio: 9 / 16;';
 			} else {
-				// 未加载完成 → 默认使用竖屏比例
 				style += 'aspect-ratio: 9 / 16;';
 			}
+			// #endif
+
+			// #ifdef MP-WEIXIN
+			if (this.videoRatio === 'landscape') {
+				style += 'padding-top: 56.25%;';
+			} else if (this.videoRatio === 'portrait') {
+				style += 'padding-top: 177.78%;';
+			} else {
+				style += 'padding-top: 177.78%;';
+			}
+			// #endif
+
+			// #ifdef MP-HARMONY
+			style += 'width: 100%;';
+			style += 'height: ' + this.harmonyVideoHeight + 'px;';
+			// #endif
 
 			return style;
+		},
+
+		// 鸿蒙平台视频高度
+		harmonyVideoHeight() {
+			if (!this.videoRatio) {
+				return (this.windowWidth * 9) / 16;
+			}
+			if (this.videoRatio === 'landscape') {
+				return (this.windowWidth * 9) / 16;
+			}
+			return (this.windowWidth * 16) / 9;
 		}
 	},
 	methods: {
@@ -104,6 +148,16 @@ export default {
 			// #endif
 		},
 
+		// 初始化窗口宽度
+		initWindowWidth() {
+			try {
+				const systemInfo = uni.getSystemInfoSync();
+				this.windowWidth = systemInfo.windowWidth || 375;
+			} catch (e) {
+				this.windowWidth = 375;
+			}
+		},
+
 		// 获取视频URL
 		getVideoUrl() {
 			if (!this.value || !this.value.videoUrl) return '';
@@ -169,6 +223,13 @@ 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.videoRatio = width >= height ? 'landscape' : 'portrait';
 			}
@@ -225,6 +286,19 @@ export default {
 .mp-video {
 	width: 100%;
 	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+/* #endif */
+
+/* 鸿蒙元服务端样式 */
+/* #ifdef MP-HARMONY */
+.harmony-video {
+	width: 100%;
+	height: 100%;
+	display: block;
+	box-sizing: border-box;
 }
 /* #endif */
 </style>