refactor(components/diy-video): 重构视频比例计算逻辑

替换原有的固定比例方案，改为通过视频实际宽高动态计算适配比例，移除冗余的harmonyVideoHeight计算方法，统一多端样式处理逻辑，优化鸿蒙端视频高度计算方式

components-diy/diy-video.vue

@@ -61,13 +61,14 @@ export default {
 		}
 	},
 	data() {
-		return {
-			videoRatio: null,
-			videoUrl: '',
-			posterUrl: '',
-			windowWidth: 0
-		};
-	},
+			return {
+				videoWidth: 0,
+				videoHeight: 0,
+				videoUrl: '',
+				posterUrl: '',
+				windowWidth: 0
+			};
+		},
 	created() {
 		this.initVideoData();
 		this.initWindowWidth();
@@ -97,44 +98,27 @@ export default {
 		// 动态计算容器比例
 		containerStyle() {
 			let style = '';
+			const defaultRatio = 9 / 16;
+
+			let ratio = defaultRatio;
+			if (this.videoWidth && this.videoHeight) {
+				ratio = this.videoHeight / this.videoWidth;
+			}
 
 			// #ifdef H5
-			if (this.videoRatio === 'landscape') {
-				style += 'aspect-ratio: 16 / 9;';
-			} else if (this.videoRatio === 'portrait') {
-				style += 'aspect-ratio: 9 / 16;';
-			} else {
-				style += 'aspect-ratio: 9 / 16;';
-			}
+			style += 'padding-top: ' + (ratio * 100) + '%;';
 			// #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%;';
-			}
+			style += 'padding-top: ' + (ratio * 100) + '%;';
 			// #endif
 
 			// #ifdef MP-HARMONY
 			style += 'width: 100%;';
-			style += 'height: ' + this.harmonyVideoHeight + 'px;';
+			style += 'height: ' + (this.windowWidth * ratio) + '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: {
@@ -192,7 +176,8 @@ export default {
 				const height = video.videoHeight;
 
 				if (width && height) {
-					this.videoRatio = width >= height ? 'landscape' : 'portrait';
+					this.videoWidth = width;
+					this.videoHeight = height;
 				}
 			});
 
@@ -231,7 +216,8 @@ export default {
 			// #endif
 
 			if (width && height) {
-				this.videoRatio = width >= height ? 'landscape' : 'portrait';
+				this.videoWidth = width;
+				this.videoHeight = height;
 			}
 		},
 
@@ -277,6 +263,11 @@ export default {
 /* H5端样式 */
 /* #ifdef H5 */
 .h5-video {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
 	object-fit: cover;
 }
 /* #endif */