uni-app 鸿蒙元服务video全屏后再退出会显示已经hide了的tabbar

uni-app 鸿蒙元服务video全屏后再退出会显示已经hide了的tabbar

项目信息 详细信息
产品分类 uniapp/小程序/鸿蒙元服务
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 家庭中文版 23H2
HBuilderX类型 Alpha
HBuilderX版本号 4.84
第三方开发者工具版本号 4.84.2025102304-alpha
基础库版本号 无
项目创建方式 HBuilderX

示例代码：

<template>  
  <view class="content">  
    <text>啦啦啦啦啦啦啦啦啦啦</text>  
    <video src="https://ddd.mp4"></video>  
  </view>  
</template>  

<script>  

export default {  

  data() {  
  },  
  onLoad() {  
    uni.hideTabBar()  
  },  

}  
</script>

操作步骤：

  • 点击video组件的全屏按钮进入全屏，再退出全屏

预期结果：

  • 原本隐藏掉的TabBar不显示

实际结果：

  • 原本隐藏掉的TabBar又显示出来了

bug描述：

在页面onLoad或者main.js时执行了uni.hideTabBar()，只要在任意包含video组件的页面全屏播放视频，再退出全屏。返回到tabbar页，会发现原本隐藏掉的TabBar又显示出来了 H5，安卓，iOS，微信小程序无此问题


更多关于uni-app 鸿蒙元服务video全屏后再退出会显示已经hide了的tabbar的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

临时解决方案,退出全屏的时候再隐藏一下。。。。 <video src=“83ec24a1618c4.mp4” @fullscreenchange=“fullscreenchange”>

methods: {
fullscreenchange(e) {
// #ifdef MP-HARMONY
if (!e.detail.fullScreen) {
uni.hideTabBar()
}
// #endif
}
},

更多关于uni-app 鸿蒙元服务video全屏后再退出会显示已经hide了的tabbar的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个鸿蒙元服务特有的兼容性问题。当视频全屏退出时，鸿蒙平台会强制重置TabBar的显示状态，导致之前通过uni.hideTabBar()隐藏的TabBar重新显示。

建议的解决方案：

  1. 监听视频全屏状态变化：
onReady() {
  // 监听视频全屏变化
  this.videoContext = uni.createVideoContext('myVideo')
  this.videoContext.on('fullscreenchange', (e) => {
    if (!e.fullScreen) {
      // 退出全屏时重新隐藏TabBar
      setTimeout(() => {
        uni.hideTabBar()
      }, 100)
    }
  })
}
  1. 在页面显示时检查TabBar状态：
onShow() {
  // 页面显示时确保TabBar保持隐藏
  uni.hideTabBar()
}
  1. 给video组件添加id：
<video id="myVideo" src="https://ddd.mp4"></video>
回到顶部