diff --git a/packageA/pages/post/.DS_Store b/packageA/pages/post/.DS_Store new file mode 100644 index 0000000..f5d1256 Binary files /dev/null and b/packageA/pages/post/.DS_Store differ diff --git a/packageA/pages/post/component/videoPlayer.vue b/packageA/pages/post/component/videoPlayer.vue index 2b026ee..d118dba 100644 --- a/packageA/pages/post/component/videoPlayer.vue +++ b/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" > @@ -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 }); @@ -155,4 +187,4 @@ defineExpose({ open }); background: rgba(255, 255, 255, 0.2); border-radius: 4rpx; } - + \ No newline at end of file diff --git a/unpackage/dist/.DS_Store b/unpackage/dist/.DS_Store index 0a582e8..ac56028 100644 Binary files a/unpackage/dist/.DS_Store and b/unpackage/dist/.DS_Store differ