uni-app nvue长视频页视频暂停之后video变黑屏
uni-app nvue长视频页视频暂停之后video变黑屏
| 项目创建方式 | 开发环境 | 版本号 |
|---|---|---|
| HBuilderX | Windows | 3.2.9 |
操作步骤：
长list列表页，有很多video标签可以滚动，播放视频不暂停滚动，等当前播放视频滚动出屏幕区域之后播放下一个视频，上一个video标签变成黑屏了
预期结果：
视频暂停之后是视频画面
实际结果：
黑屏
bug描述：
长列表页面，视频播放过程中滚动出屏幕之后暂停video会变黑屏，但是如果滚动播放视频没有滚动出屏幕会显示暂停的页面，
更多关于uni-app nvue长视频页视频暂停之后video变黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html
9 回复
你这样一下子弄这么多 video标签 用不了多久就会内存爆了的 做法是不合理的 推荐你只有一个video播放器 动态去插入到指定位置 播放 只是一个view 放张图片 然后放一个播放按钮
在nvue中，video组件在滚动出屏幕后变黑屏是常见问题，这通常与渲染优化机制有关。nvue采用原生渲染，当组件离开可视区域时，系统可能回收或重置其渲染状态以提升性能，导致视频暂停后显示黑屏。
主要原因：
- 原生渲染的视图回收机制导致视频纹理丢失
- iOS/Android平台对离屏video组件的处理策略不同
- video组件的poster属性在暂停状态可能被错误显示
解决方案：
- 使用
v-if控制渲染：
<video v-if="isVideoVisible" :src="src" @pause="handlePause"></video>
通过监听滚动位置，动态设置isVideoVisible，确保离开屏幕的video被销毁，重新进入时重建。
- 设置
show-progress和show-center-play-btn：
<video
:show-progress="true"
:show-center-play-btn="false"
:controls="false"
></video>
某些情况下，控制UI元素的显示可以避免渲染异常。
-
iOS特定处理： iOS平台可尝试设置
play-background-pause="false"，但需注意这可能影响后台播放功能。 -
监听滚动优化：
onPageScroll(e) {
// 计算当前可视区域，只保留可见范围内的video
}