uni-app 视频组件BUG

uni-app 视频组件BUG

示例代码：

详情页点击删除执行下列代码

let pages1 = getCurrentPages()
let page1 = pages1[pages1.length - 2]  // 获取上一页面栈
page1.$vm.lista = [] // 清空列表
page1.$vm.pageNum = 1 // 初始化分页
page1.$vm.contentPortion()  // 重新获取页面信息
// 删除完成之后返回上一页
uni.navigateBack({
delta: 1
})

然后就是出现我删除的那个视频卡在了页面上 不管我重新刷新列表还是怎么弄 就是一直卡在页面上 （已确认列表里不存在该视频）


## 操作步骤：


视频列表   进入详情页删除   返回上一页   卡页面

预期结果：

页面正常 已删除的视频不会卡在页面上


## 实际结果：


卡在了页面上

bug描述：

视频列表页：videoPage
视频详情页：videoDetail
我在videoPage点击进入videoDetail页面 然后又功能是可以删除当前视频 我在详情页删除了当前的视频 然后我用 getCurrentPages 获取到上一个页面（列表页）栈 然后重新更新列表 但是我删除的video的视频卡在了页面上 一直不消失


| 信息类别       | 信息内容           |
|----------------|--------------------|
| 产品分类       | uniapp/App         |
| PC开发环境     | Windows            |
| PC操作系统版本 | win10              |
| HBuilderX类型  | 正式               |
| HBuilderX版本  | 3.2.2              |
| 手机系统       | Android            |
| 手机系统版本   | Android 11         |
| 手机厂商       | 华为               |
| 手机机型       | redmi K30S 纪念版  |
| 页面类型       | vue                |
| 打包方式       | 云端               |
| 项目创建方式   | HBuilderX          |

更多关于uni-app 视频组件BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 视频组件BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的 uni-app 视频组件内存释放问题。视频组件在页面切换时可能没有正确销毁，导致残留画面。

问题分析：

  1. 视频组件（video）在 Android 端有独立的渲染层
  2. 直接操作页面栈更新数据时，视频组件的销毁可能不同步
  3. 残留的视频实例仍然占用着视图层

解决方案：

方案一：强制销毁视频组件（推荐） 在返回列表页时，先停止所有视频播放：

// 在返回前的代码中添加
const videoContext = uni.createVideoContext('videoId') // 需要给video组件设置id
videoContext.stop() // 停止播放
videoContext.destroy() // 销毁实例

// 然后再执行你的返回逻辑
uni.navigateBack({
  delta: 1
})

方案二：使用数据驱动更新 修改你的删除逻辑，不要直接操作页面栈：

// 在详情页删除成功后
uni.$emit('videoDeleted', {videoId: deletedId})

// 返回列表页
uni.navigateBack({
  delta: 1
})

// 在列表页的onShow生命周期中
onShow() {
  uni.$on('videoDeleted', this.refreshList)
},
onHide() {
  uni.$off('videoDeleted', this.refreshList)
},
methods: {
  refreshList() {
    this.lista = []
    this.pageNum = 1
    this.contentPortion()
  }
}

方案三：添加视频组件key 给视频组件添加唯一的key，确保数据更新时组件重新渲染：

<video 
  :src="item.url" 
  :key="item.id"
  @play="onPlay"
></video>

方案四：在列表页onShow中处理 在列表页的onShow生命周期中强制刷新：

onShow() {
  // 停止所有可能正在播放的视频
  this.stopAllVideos()
  // 重新获取数据
  this.contentPortion()
},
methods: {
  stopAllVideos() {
    // 遍历停止所有视频实例
    this.lista.forEach(item => {
      if(item.videoContext) {
        item.videoContext.stop()
      }
    })
  }
}
回到顶部