chore:竖版视频可以正常在容器里
This commit is contained in:
@@ -181,7 +181,7 @@ const localDevConfig = ({
|
||||
// })['2724']; // 生物菌肥
|
||||
// })['2811']; // 选择要使用的环境配置
|
||||
// })['local-11']; // 选择要使用的环境配置
|
||||
})['192.168.8.118-1']; // 本地
|
||||
})['1']; // 本地
|
||||
// })['local-2']; // 本地
|
||||
// })['local-11']; // 本地
|
||||
// })['1-test']; // test
|
||||
|
||||
@@ -37,8 +37,7 @@
|
||||
:info="goodsSkuDetail.barrageData" />
|
||||
|
||||
<!-- 商品媒体信息 -->
|
||||
<!-- 视频区域高度:图片态走 swiperHeight;视频态且已拿到竖屏视频元数据时,按视频比例自适应高度(最大 5:4),避免竖屏视频被裁剪成横屏 -->
|
||||
<view class="goods-media" :style="{ height: mediaHeight }">
|
||||
<view class="goods-media" :style="{ height: goodsSkuDetail.swiperHeight }">
|
||||
<!-- 商品图片 -->
|
||||
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
|
||||
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval"
|
||||
@@ -57,11 +56,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品视频:objectFit=contain 保留原始宽高比,竖屏/横屏均不做强制裁剪 -->
|
||||
<!-- 商品视频:objectFit=contain 保留原始宽高比,在固定高度的图片容器内居中播放 -->
|
||||
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
|
||||
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)"
|
||||
:poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="contain"
|
||||
@loadedmetadata="onVideoLoadedMetadata"
|
||||
playsinline webkit-playsinline x5-playsinline></video>
|
||||
</view>
|
||||
|
||||
@@ -540,8 +538,6 @@ export default {
|
||||
data() {
|
||||
// 商品详情骨架屏:模拟「轮播图 + 价格行 + 标题简介 + 规格行 + 商家 + 详情 + 推荐」
|
||||
return {
|
||||
// 视频元数据(宽/高),用于竖屏视频自适应容器高度
|
||||
videoInfo: { width: 0, height: 0 },
|
||||
// 1. 轮播图:方形 banner 占位
|
||||
skeletonBanner: {
|
||||
padding: '0',
|
||||
@@ -666,27 +662,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 媒体容器高度:视频激活且为竖屏时按视频比例撑高,否则保持图片 swiper 高度
|
||||
mediaHeight() {
|
||||
if (
|
||||
this.switchMedia === 'video' &&
|
||||
this.videoInfo.width &&
|
||||
this.videoInfo.height &&
|
||||
this.videoInfo.height > this.videoInfo.width
|
||||
) {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync();
|
||||
const ratio = this.videoInfo.height / this.videoInfo.width;
|
||||
const videoHeight = sys.windowWidth * ratio;
|
||||
// 竖屏视频最大高度限制为屏幕宽度的 5:4,防止 9:16 等过长视频占满整屏
|
||||
const maxHeight = sys.windowWidth * 1.25;
|
||||
return Math.min(videoHeight, maxHeight) + 'px';
|
||||
} catch (e) {
|
||||
// 异常时回退到图片高度
|
||||
}
|
||||
}
|
||||
return this.goodsSkuDetail.swiperHeight;
|
||||
},
|
||||
aiAvatarUrl() {
|
||||
return this.$util.img(IMAGE_CONFIG.aiAvatar);
|
||||
},
|
||||
@@ -711,26 +686,6 @@ export default {
|
||||
return this.goodsSkuDetail && Number(this.goodsSkuDetail.goods_id) > 0;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 切换商品/视频源时重置视频元数据,防止旧数据影响新视频的高度计算
|
||||
'goodsSkuDetail.video_url'(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.videoInfo = { width: 0, height: 0 };
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 视频元数据加载后记录宽高,用于竖屏视频自适应容器高度
|
||||
onVideoLoadedMetadata(e) {
|
||||
const detail = e.detail || {};
|
||||
if (detail.width && detail.height) {
|
||||
this.videoInfo = {
|
||||
width: Number(detail.width),
|
||||
height: Number(detail.height)
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [scroll, detail]
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user