uni-app video组件在app切换到后台再切回来时变形且不播放

uni-app video组件在app切换到后台再切回来时变形且不播放

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤:

video 在app切换到后台再切回来的时候变形且不播放,看我上传到视频

预期结果:

video 在app切换到后台再切回来的时候变形且不播放,看我上传到视频

实际结果:

video 在app切换到后台再切回来的时候变形且不播放,看我上传到视频

bug描述:

video 在app切换到后台再切回来的时候变形且不播放,看我上传到视频

image


更多关于uni-app video组件在app切换到后台再切回来时变形且不播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我试试

更多关于uni-app video组件在app切换到后台再切回来时变形且不播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app原生video组件在App平台的生命周期管理问题。当应用切换到后台时,iOS/Android系统会暂停视频播放并可能释放资源,切回前台时组件状态恢复异常。

核心解决方案:

  1. 监听应用状态变化onHideonShow生命周期中手动控制video:

    onShow() {
      if (this.videoContext) {
        this.videoContext.play()
      }
    },
    onHide() {
      if (this.videoContext) {
        this.videoContext.pause()
      }
    }
    
  2. 使用videoContext实例 通过createVideoContext获取实例,确保操作的是同一视频组件:

    onReady() {
      this.videoContext = uni.createVideoContext('myVideo')
    }
    
  3. 添加key属性强制重建 在video组件添加:key绑定,通过改变key值强制重新渲染:

    <video :key="videoKey" src="..."></video>
    
    onShow() {
      this.videoKey = Date.now()
    }
    
  4. 样式变形修复 添加固定宽高或使用object-fit: contain保持比例:

    video {
      width: 100%;
      height: 400rpx;
      object-fit: contain;
    }
回到顶部