From 50ee885b7498008980b2ee8673e8d54085b32c82 Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Wed, 25 Mar 2026 14:44:25 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E5=BE=AE=E4=BF=A1=E5=B0=8F?=
=?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=AE=9E=E7=8E=B0=E7=AB=96=E5=B1=8F=E6=98=AF?=
=?UTF-8?q?=E7=AB=96=E5=B1=8F=EF=BC=8C=E6=A8=AA=E5=B1=8F=E6=98=AF=E6=A8=AA?=
=?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components-diy/diy-video-list.vue | 75 ++++++++++++++++++++++-
components-diy/diy-video.vue | 84 +++++++++++++++++++++-----
pages_tool/ai-chat/ai-chat-message.vue | 38 ++++++++++++
3 files changed, 180 insertions(+), 17 deletions(-)
diff --git a/components-diy/diy-video-list.vue b/components-diy/diy-video-list.vue
index c60f3b1..687588a 100644
--- a/components-diy/diy-video-list.vue
+++ b/components-diy/diy-video-list.vue
@@ -53,9 +53,19 @@
-
-
+
+
@@ -126,12 +136,38 @@ export default {
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
+ },
+
+ // 弹窗视频容器样式
+ popupVideoStyle() {
+ let style = 'position:fixed;width:100%;left:0;';
+
+ if (this.popupVideoRatio) {
+ // 根据视频比例设置位置
+ if (this.popupVideoRatio === 'portrait') {
+ // 竖屏视频：居中显示，使用9/16比例
+ 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;';
+ }
+
+ return style;
}
},
methods: {
// 显示视频播放弹窗
showVideo(item) {
this.video_url = item.videoUrl;
+ // 重置视频比例为null，等待新的检测结果
+ this.popupVideoRatio = null;
this.$refs.videoPopup.open();
},
@@ -139,6 +175,39 @@ export default {
imgError(index) {
// 图片加载失败的处理逻辑
console.log('图片加载失败:', index);
+ },
+
+ // 弹窗视频加载完成事件
+ onPopupVideoLoaded(event) {
+ this.$nextTick(() => {
+ let width = 0;
+ let height = 0;
+
+ // H5 端：获取真实视频宽高
+ // #ifdef H5
+ const video = this.$refs.popupVideoRef;
+ if (video) {
+ width = video.videoWidth || 0;
+ height = video.videoHeight || 0;
+ }
+ // #endif
+
+ // 微信小程序端：通过事件对象获取视频宽高
+ // #ifdef MP-WEIXIN
+ if (event && event.detail) {
+ width = event.detail.width || 0;
+ height = event.detail.height || 0;
+ }
+ // #endif
+
+ if (width && height) {
+ this.popupVideoRatio = width >= height ? 'landscape' : 'portrait';
+ console.log(`弹窗视频宽高比检测: ${width}x${height}, 比例: ${this.popupVideoRatio}`);
+ } else {
+ // 获取失败，默认竖屏
+ this.popupVideoRatio = 'portrait';
+ }
+ });
}
}
}
diff --git a/components-diy/diy-video.vue b/components-diy/diy-video.vue
index ecb8f61..da4d5a8 100644
--- a/components-diy/diy-video.vue
+++ b/components-diy/diy-video.vue
@@ -1,8 +1,9 @@
-
+
@@ -17,13 +19,15 @@
@@ -41,7 +45,9 @@ export default {
}
},
data() {
- return {};
+ return {
+ videoRatio: null // 视频比例：'landscape'（横屏）或 'portrait'（竖屏）
+ };
},
created() { },
mixins: [DiyMinx],
@@ -59,6 +65,26 @@ export default {
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
+ },
+ // 动态计算容器比例
+ containerStyle() {
+ let style = '';
+
+ if (this.videoRatio) {
+ // 已加载并识别出比例
+ if (this.videoRatio === 'portrait') {
+ // 竖屏视频：9/16比例
+ style += 'aspect-ratio: 9 / 16;';
+ } else {
+ // 横屏视频：16/9比例
+ style += 'aspect-ratio: 16 / 9;';
+ }
+ } else {
+ // 未加载完成 → 默认使用竖屏比例（适合短视频）
+ style += 'aspect-ratio: 9 / 16;';
+ }
+
+ return style;
}
},
methods: {
@@ -73,6 +99,42 @@ export default {
// 否则使用$util.img()处理
return this.$util.img(videoUrl);
},
+
+ // 视频加载完成事件
+ onVideoLoaded(event) {
+ this.$nextTick(() => {
+ let width = 0;
+ let height = 0;
+
+ // H5端：通过video元素获取真实视频宽高
+ // #ifdef H5
+ const video = this.$refs.videoRef;
+ if (video) {
+ width = video.videoWidth || 0;
+ height = video.videoHeight || 0;
+ }
+ // #endif
+
+ // 微信小程序端：通过事件对象获取视频宽高
+ // #ifdef MP-WEIXIN
+ if (event && event.detail) {
+ width = event.detail.width || 0;
+ height = event.detail.height || 0;
+ }
+ // #endif
+
+ if (width && height) {
+ // 判断视频方向：宽度 >= 高度为横屏，否则为竖屏
+ this.videoRatio = width >= height ? 'landscape' : 'portrait';
+ console.log(`视频宽高比检测: ${width}x${height}, 比例: ${this.videoRatio}`);
+ } else {
+ // 获取失败，默认竖屏
+ this.videoRatio = 'portrait';
+ console.log('视频宽高比检测失败，默认使用竖屏比例');
+ }
+ });
+ },
+
async handlerClick(videoUrl) {
await this.__$emitEvent({
eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
@@ -97,28 +159,22 @@ export default {
height: 100%;
}
-/* H5端样式 - 横屏 */
+/* H5端样式 */
/* #ifdef H5 */
-.video-container {
- aspect-ratio: 16/9;
-}
-
.h5-video {
display: block;
- object-fit: cover;
+ object-fit: contain; /* 改为contain以保持视频比例 */
+ background-color: #000; /* 添加背景色 */
}
/* #endif */
-/* 微信小程序端样式 - 竖屏 */
+/* 微信小程序端样式 */
/* #ifdef MP-WEIXIN */
-.video-container {
- aspect-ratio: 9/16;
-}
-
.mp-video {
position: absolute;
top: 0;
left: 0;
+ background-color: #000; /* 添加背景色 */
}
.mp-video>>>.uni-video-container {
diff --git a/pages_tool/ai-chat/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue
index cf9160b..d1eba61 100644
--- a/pages_tool/ai-chat/ai-chat-message.vue
+++ b/pages_tool/ai-chat/ai-chat-message.vue
@@ -108,11 +108,13 @@
@@ -1225,6 +1227,42 @@ export default {
}
},
+ // 视频加载完成事件
+ onVideoLoaded(message, event) {
+ this.$nextTick(() => {
+ let width = 0;
+ let height = 0;
+
+ // H5端：通过video元素获取真实视频宽高
+ // #ifdef H5
+ const video = this.$refs.videoRef;
+ if (video) {
+ width = video.videoWidth || 0;
+ height = video.videoHeight || 0;
+ }
+ // #endif
+
+ // 微信小程序端：通过事件对象获取视频宽高
+ // #ifdef MP-WEIXIN
+ if (event && event.detail) {
+ width = event.detail.width || 0;
+ height = event.detail.height || 0;
+ }
+ // #endif
+
+ if (width && height) {
+ // 判断视频方向：宽度 >= 高度为横屏，否则为竖屏
+ const videoRatio = width >= height ? 'landscape' : 'portrait';
+ console.log(`AI聊天视频宽高比检测: ${width}x${height}, 比例: ${videoRatio}`);
+
+ // 动态设置视频样式
+ // 这里可以添加逻辑来动态调整视频播放器的样式
+ // 例如：message.videoRatio = videoRatio;
+ // 然后在模板中根据message.videoRatio调整样式
+ }
+ });
+ },
+
// 视频播放
onVideoPlay(message) {
this.$emit('video-play', message)