答案是：默认只加载封面图，点击才初始化视频上下文，且同一时间最多只激活1个。需用v-if控制video渲染、统一poster尺寸、设置min-height防跳动、禁用autoplay、预加载poster并fallback占位图、iOS设objectFit="cover"。
评价页视频卡片怎么嵌进列表不卡顿
uni-app 里评价带视频，不能直接把 <video> 往 v-for 里一塞就完事。iOS 微信小程序对同屏多个 <video> 的解码和渲染压力极大，容易白屏、滚动卡顿、甚至触发系统强制 kill。核心思路是：**默认只加载封面图，点击才初始化视频上下文，且同一时间最多只激活 1 个**。
- 每个评价项用
v-if="showVideo === index"控制是否渲染<video>，其余全用<image>显示 poster（必须是完整 https URL） - 点击视频区域时，先
uni.createVideoContext('video-' + index)，再调.play()；同时重置其他所有showVideo = -1 - 务必加
enable-progress-gesture="false"和show-center-play-btn，避免手势冲突导致播放失败 - poster 图片尺寸必须与 video 容器宽高比一致（推荐 16:9），否则 iOS 会拉伸或留黑边
视频+图文混排时高度怎么统一不跳动
评价列表里有纯文字、带图、带视频的混合项，如果不用固定高度或预设占位，滚动时会因视频加载/解码完成而“抖一下”。这不是样式问题，是小程序 layout 计算时机滞后导致的。
- 所有评价项外层容器设
min-height: 200px（根据设计稿调整），内部用position: relative布局 - 视频 poster 区域用
aspect-ratio: 16/9（H5 支持），小程序端 fallback 为width: 100%; height: calc(100vw * 0.5625) - 文字内容区用
display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden;截断，禁用text-overflow: ellipsis（对 flex 子项无效） - 别用
flex: 1去撑高——iOS 小程序里它在 video 加载后会重新计算，引发重排
swiper 嵌视频轮播怎么避免自动播放冲突
用户上传的评价视频常以轮播形式展示（比如一条评价含 3 段视频），但 <swiper> 自动轮播 + <video> 自动播放会互相干扰：切到下一帧时上一个视频还在播，声音重叠、内存暴涨。
- 给 swiper 设
:autoplay="false"，完全由用户手势控制 - 每个
<swiper-item>内部只放 1 个<video>，并绑定@play和@pause事件 - 在
@change回调里主动调videoContext.pause()当前项，再videoContext.seek(0)重置进度条 - 禁止设置
autoplay属性——小程序端该属性在 swiper-item 内不可靠，且可能被微信拦截
视频缩略图怎么预加载又不拖慢首屏
评价页首屏通常显示 10 条，如果每条都请求视频 poster 图，网络并发数超限会导致图片加载失败或超时。不能靠懒加载（lazy-load 对 video poster 无效），得提前规划。
- 后端返回评价数据时，必须附带 poster 字段（非 null），且格式统一为 480p 尺寸（如
https://xxx.com/poster_480.jpg） - 前端在
onLoad阶段用uni.downloadFile并发预取前 5 条的 poster，存到本地临时路径；超出部分等滚动进入视口再按需下载 - poster 加载失败时，统一 fallback 到占位图：
https://cdn.xxx.com/default-poster.png，避免空白闪烁 - 别用
uni.previewImage打开视频——它不支持 video 类型，会 crash；改用uni.navigateTo({ url: '/pages/video-player?id=' + id })
真实项目里最易被忽略的是：iOS 端 <video> 的 objectFit 必须设为 "cover"，设成 "contain" 或留空会导致 poster 和实际播放画面比例不一致，用户看到的永远是“裁剪错位”的效果。
