uni-app 在安卓手机红米10X下 video组件出现黑边BUG

uni-app 在安卓手机红米10X下 video组件出现黑边BUG

示例代码：

<video id="myVideo"  src="" controls="false" play-strategy="3" autoplay="true" :object-fit='objectFit'  class="zbvide" :style="{ height: gaodu + 'px' }"></video>

操作步骤：

无

预期结果：

点home切换回来能保持满屏吗？

实际结果：

无

bug描述：

我在nvue下使用video的时候

<video id="myVideo"  src="" controls="false" play-strategy="3" autoplay="true" :object-fit='objectFit'  class="zbvide" :style="{ height: gaodu + 'px' }"></video>

第一次进去正常能满屏。点手机home切换到后台，再切换回来就如图二所示视频被顶上去了。我偿试用

this.videoContext = uni.createVideoContext("myVideo");
this.videoContext.objectFit="cover";

动态再次设置无效。

示例图片1

示例图片2


更多关于uni-app 在安卓手机红米10X下 video组件出现黑边BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

是暂停后会有黑边是吧， 这个问题下个版本会修复

更多关于uni-app 在安卓手机红米10X下 video组件出现黑边BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不是暂停。是直播的时候马上点home键切换到后台。下次版本什么时候？

回复 到此一游123:加一下我qq 643833712,我用内测环境打个包给你试试

这是一个典型的视频组件在应用状态切换后渲染异常的问题。在Android平台上，应用从后台切换回前台时，视频组件可能无法正确保持原有的布局状态。

问题分析：

  1. 应用进入后台时，系统可能释放了部分GPU资源
  2. 返回前台时，video组件的渲染层未正确恢复
  3. object-fit属性在状态切换后可能失效

解决方案：

  1. 监听应用状态变化
onShow() {
  this.$nextTick(() => {
    this.resetVideoLayout();
  });
}

methods: {
  resetVideoLayout() {
    setTimeout(() => {
      if(this.videoContext) {
        this.videoContext.exitFullScreen(); // 先退出全屏状态
        this.videoContext.requestFullScreen(); // 重新请求全屏
      }
    }, 100);
  }
}
  1. 强制刷新视频组件
// 在onShow中重新设置视频源
onShow() {
  this.$nextTick(() => {
    const currentSrc = this.videoSrc;
    this.videoSrc = '';
    setTimeout(() => {
      this.videoSrc = currentSrc;
    }, 50);
  });
}
  1. 使用CSS Hack 在视频容器上添加：
.zbvide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
回到顶部