flat:优化视频播放显示

packageA/pages/post/component/videoPlayer.vue

@@ -6,8 +6,8 @@
         :style="{
             left: position.x + 'px',
             top: position.y + 'px',
-            width: isFullScreen ? '100%' : '300rpx',
-            height: isFullScreen ? '100vh' : '200rpx',
+            width: isFullScreen ? '100%' : videoWidth + 'rpx',
+            height: isFullScreen ? '100vh' : videoHeight + 'rpx',
         }"
         @touchstart="handleTouchStart"
         @touchmove="handleTouchMove"
@@ -24,8 +24,10 @@
                 height: '100%',
             }"
             id="myVideo"
+            ref="videoRef"
             @play="onPlay"
             @pause="onPause"
+            @loadedmetadata="onLoadedMetadata"
         ></video>
 
         <!-- 控制栏 -->
@@ -41,6 +43,8 @@
 import { ref, reactive, onMounted } from 'vue';
 import { nextTick } from 'vue';
 
+const videoRef = ref(null);
+
 const visible = ref(false);
 const isPlaying = ref(false);
 const isFullScreen = ref(false);
@@ -49,6 +53,8 @@ const position = reactive({ x: 20, y: 100 });
 const videoContext = ref(null);
 const startPos = reactive({ x: 0, y: 0 });
 const moving = ref(false);
+const videoWidth = ref(0);
+const videoHeight = ref(0);
 
 // 初始化视频上下文
 onMounted(() => {
@@ -71,8 +77,8 @@ const handleTouchMove = (e) => {
     const newY = e.touches[0].clientY - startPos.y;
 
     // 边界检测
-    const maxX = window.innerWidth - 150; // 300rpx换算后的值
-    const maxY = 50 + window.innerHeight - 200;
+    const maxX = window.innerWidth - videoWidth.value / 2; // 300rpx换算后的值
+    const maxY = window.innerHeight - videoHeight.value / 2;
 
     position.x = Math.max(0, Math.min(newX, maxX));
     position.y = Math.max(0, Math.min(newY, maxY));
@@ -124,6 +130,32 @@ const open = (url) => {
     });
 };
 
+const onLoadedMetadata = (e) => {
+    const video = e.detail;
+    const width = video.width;
+    const height = video.height;
+    const ratio = width / height;
+
+    // 设置宽度：横屏宽 300，竖屏宽 180（可自定义）
+    if (ratio >= 1) {
+        videoWidth.value = 300; // 横屏
+        videoHeight.value = 300 * (height / width); // 保持比例
+    } else {
+        videoWidth.value = 180; // 竖屏
+        videoHeight.value = 180 * (height / width); // 保持比例
+    }
+    // console.log(`宽高: ${width}x${height}`);
+    // console.log(`比例: ${ratio.toFixed(2)} (${getRatioName(ratio)})`);
+};
+
+function getRatioName(ratio) {
+    const rounded = Math.round(ratio * 100) / 100;
+    if (Math.abs(rounded - 16 / 9) < 0.01) return '16:9';
+    if (Math.abs(rounded - 4 / 3) < 0.01) return '4:3';
+    if (Math.abs(rounded - 1) < 0.01) return '1:1';
+    return `${rounded.toFixed(2)}:1`;
+}
+
 // 暴露方法
 defineExpose({ open });
 </script>
@@ -155,4 +187,4 @@ defineExpose({ open });
     background: rgba(255, 255, 255, 0.2);
     border-radius: 4rpx;
 }
-</style>
+</style>