diff --git a/components-diy/diy-video-list.vue b/components-diy/diy-video-list.vue index 53a8f06..2b651f2 100644 --- a/components-diy/diy-video-list.vue +++ b/components-diy/diy-video-list.vue @@ -64,7 +64,9 @@ id="myVideo" :src="video_url" :controls="true" + object-fit="contain" @loadedmetadata="onPopupVideoLoaded" + @error="onPopupVideoError" > @@ -88,11 +90,14 @@ export default { pageWidth: '', indicatorDots: false, swiperCurrent: 0, - video_url: '' + video_url: '', + popupVideoWidth: 0, + popupVideoHeight: 0, + windowWidth: 0 } }, created() { - // 组件创建时的逻辑 + this.initWindowWidth(); }, watch: { componentRefresh(newValue) { @@ -140,24 +145,33 @@ export default { // 弹窗视频容器样式 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;'; + const defaultRatio = 9 / 16; + + let ratio = defaultRatio; + if (this.popupVideoWidth && this.popupVideoHeight) { + ratio = this.popupVideoHeight / this.popupVideoWidth; } - + + const isPortrait = ratio > 1; + + if (isPortrait) { + style += 'top:50%;transform:translateY(-50%);'; + } else { + style += 'top:20%;'; + } + + // #ifdef H5 + style += 'padding-top: ' + (ratio * 100) + '%;'; + // #endif + + // #ifdef MP-WEIXIN + style += 'padding-top: ' + (ratio * 100) + '%;'; + // #endif + + // #ifdef MP-HARMONY + style += 'height: ' + (this.windowWidth * ratio) + 'px;'; + // #endif + return style; } }, @@ -165,8 +179,8 @@ export default { // 显示视频播放弹窗 showVideo(item) { this.video_url = item.videoUrl; - // 重置视频比例为null,等待新的检测结果 - this.popupVideoRatio = null; + this.popupVideoWidth = 0; + this.popupVideoHeight = 0; this.$refs.videoPopup.open(); }, @@ -174,6 +188,16 @@ export default { imgError(index) { // 图片加载失败的处理逻辑 }, + + // 初始化窗口宽度 + initWindowWidth() { + try { + const systemInfo = uni.getSystemInfoSync(); + this.windowWidth = systemInfo.windowWidth || 375; + } catch (e) { + this.windowWidth = 375; + } + }, // 弹窗视频加载完成事件 onPopupVideoLoaded(event) { @@ -198,13 +222,24 @@ 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.popupVideoRatio = width >= height ? 'landscape' : 'portrait'; - } else { - // 获取失败,默认竖屏 - this.popupVideoRatio = 'portrait'; + this.popupVideoWidth = width; + this.popupVideoHeight = height; } }); + }, + + // 弹窗视频错误事件 + onPopupVideoError(event) { + console.error('Popup video load failed:', event); } } } @@ -576,8 +611,9 @@ export default { .video-container { width: 100%; - height: 300px; position: relative; + overflow: hidden; + background-color: #000; } .adaptive-video { @@ -589,6 +625,22 @@ export default { left: 0; } +/* #ifdef MP-WEIXIN */ +.adaptive-video { + position: absolute; + top: 0; + left: 0; +} +/* #endif */ + +/* #ifdef MP-HARMONY */ +.adaptive-video { + position: static; + display: block; + box-sizing: border-box; +} +/* #endif */ + .video-nav { padding: 16rpx; box-sizing: border-box;