uni-app中实现带视频的评价列表，核心是解决video组件在滚动容器中的渲染异常、自动播放控制、尺寸错位和内存泄漏问题；h5与小程序表现差异大，ios微信小程序易卡顿或黑屏。

直接上结论：uni-app 里实现带视频的评价列表，核心不是“怎么放视频”，而是解决 video 组件在 scroll-view 或列表滚动容器里的渲染异常、自动播放控制、尺寸错位和内存泄漏问题。H5 和小程序表现差异极大，iOS 微信小程序尤其容易卡顿或黑屏。

为什么 video 在评价列表里经常不显示或只闪一下

根本原因是 uni-app 的 video 组件在非顶层、非可视区域、或被 display: none / opacity: 0 包裹时，底层原生控件会销毁或暂停——尤其是微信小程序，video 一旦离开视口就立即释放资源，再滚回来不会自动恢复。

• 常见错误现象：video 只在首次进入视口时短暂显示 1 帧，之后黑屏；点击播放按钮无响应；H5 正常但小程序白屏
• 必须确保 video 外层容器有明确宽高（不能靠 flex 布局撑开），且父级不能有 overflow: hidden 或 transform 属性（小程序中会截断 video 渲染）
• 避免用 v-if 控制 video 显示/隐藏，改用 v-show + visibility: hidden，否则组件实例会被销毁
• 每个 video 必须绑定唯一 ref，并在 onPageScroll 或 scroll-view 的 @scroll 中手动调用 play() / pause()

video 和图片混排时如何统一高度、避免布局跳动

评价项里常有「文字 + 图片 + 视频」混合内容，视频默认比例是 16:9，但用户上传的竖屏视频可能为 9:16，硬设宽高会导致拉伸或留黑边。

jQuery淘宝主图拖拽上传代码

jQuery淘宝主图拖拽上传代码是一款仿淘宝主图上传演示，选择多张图片上传，支持拖拽图片上传功能，可用于手机端图片上传代码。

下载

• 用 object-fit: cover + 容器固定宽高（如 width: 100%; height: 300rpx;），再配合 video 的 show-center-play-btn 和 show-play-btn 属性控制 UI
• 对竖屏视频，可提前在后端或上传时打标（如 orientation: "portrait"），前端根据该字段动态设置容器 height（例如竖屏设 450rpx，横屏设 280rpx）
• 不要依赖 bindtimeupdate 动态计算尺寸——它触发太频繁，且小程序中回调不稳定；优先用服务端返回的宽高元数据
• 若用 scroll-view，需开启 enhanced 属性（仅支持微信小程序基础库 2.27.0+），否则 video 滚动中会闪烁

性能关键：怎么避免列表一刷几十个 video 导致卡顿

一个评价页若有 20 条带视频的评论，全部加载 video 标签会瞬间占用大量内存，iOS 小程序极易 crash。

• 只对当前可视区域 ±1 条的 video 调用 play()，其余统一 pause() 并设置 src=""（注意：设空字符串才能真正释放资源）
• 用 IntersectionObserver 替代 @scroll 做懒加载（小程序支持，H5 需降级 polyfill），比监听滚动更精准、性能更好
• 禁止自动播放（autoplay 在 iOS 和部分安卓浏览器被禁用），改用「点击封面图 → 播放」交互，封面图用第一帧截图（服务端生成或前端 canvas 截取）
• 视频封面图必须用 poster 属性，且尺寸与 video 容器一致，否则 iOS 下会先闪黑再出图

最易被忽略的一点：微信小程序中，video 的 id 必须全局唯一，且不能含特殊字符或下划线开头；如果用循环 v-for 生成，务必用 :id="'video-' + item.id" 这种格式，否则多个 video 会互相干扰控制逻辑。