uni-app video组件全屏播放后界面上部与底部被遮挡，image组件裁剪图片显示异常

uni-app video组件全屏播放后界面上部与底部被遮挡，image组件裁剪图片显示异常

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.9
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 p40
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>
<view class="video-player">
<video id="chatVideo" v-if="src" :controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false"  class="video" :src="src" @fullscreenchange="fullscreenchange"></video>
</view>
</template>  

<script>
export default {
data() {
return {
src: '',
videoContext:null,
controls:false
}
},
onReady: function (res) {
//创建并返回 video 上下文 videoContext 对象 https://uniapp.dcloud.io/api/media/video-context?id=createvideocontext
this.videoContext = uni.createVideoContext('chatVideo')
},
onLoad() {
const eventChannel = this.$scope.eventChannel;
eventChannel.on('toVideoPlayer', (data)=> {
this.src = data.content
//如提示chatVideo未找到，请加大延时时间
setTimeout(()=>{
this.videoContext.requestFullScreen({direction:0})
this.videoContext.play()
},50)
})
},
methods: {
//视频进入和退出全屏时触发
fullscreenchange(e) {
if(!e.detail.fullScreen){
this.src = ''
uni.navigateBack({
delta:1
})
}else{
this.controls = true
}
}
}
</script>

<style scoped>
.video-player {
background-color: #000000;
flex: 1;
/* 预防video控制属性失效.播放按钮显示并且位置不正确问题 */
align-items: center;
justify-content: center;
}
</style>

操作步骤：

点击图片 => video页面 => 自动全屏播放

预期结果：

正常无遮挡

实际结果：

上下被遮挡并且首帧图展示

bug描述：

华为品牌手机只测过p40，vivo等其他品牌正常
!!! 测试的p40系统是鸿蒙2.0

Image

Image


更多关于uni-app video组件全屏播放后界面上部与底部被遮挡，image组件裁剪图片显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
<template> <view class="video-player"> </view> </template> <script> export default { data() { return { src: '', videoContext:null, controls:false } }, onReady: function (res) { //创建并返回 video 上下文 videoContext 对象 https://uniapp.dcloud.io/api/media/video-context?id=createvideocontext this.videoContext = uni.createVideoContext('chatVideo') }, onLoad() { const eventChannel = this.$scope.eventChannel; eventChannel.on('toVideoPlayer', (data)=> { this.src = data.content //如提示chatVideo未找到，请加大延时时间 setTimeout(()=>{ this.videoContext.requestFullScreen({direction:0}) this.videoContext.play() },50) }) }, methods: { //视频进入和退出全屏时触发 fullscreenchange(e) { if(!e.detail.fullScreen){ this.src = '' uni.navigateBack({ delta:1 }) }else{ this.controls = true } } } } </script> <style scoped> .video-player { background-color: #000000; flex: 1; /* 预防video控制属性失效.播放按钮显示并且位置不正确问题 */ align-items: center; justify-content: center; } </style>

更多关于uni-app video组件全屏播放后界面上部与底部被遮挡，image组件裁剪图片显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对您遇到的video组件全屏遮挡和image组件裁剪异常问题，这主要是由于华为/鸿蒙系统对全面屏适配的处理机制不同导致的。以下是具体解决方案：

1. video全屏遮挡问题 在pages.json中对应页面的style配置中添加：

"app-plus": {
  "safearea": {
    "bottom": {
      "offset": "none"
    }
  }
}

同时检查页面是否使用了fitSystem: true，建议暂时关闭此属性。

2. image裁剪异常问题 在manifest.json的app-plus节点下添加：

"safearea": {
  "background": "#000000",
  "bottom": {
    "offset": "none"
  }
}

3. 代码层面调整 修改video组件样式：

.video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

对于image组件，明确指定裁剪模式：

<image mode="aspectFill" src="..."></image>
回到顶部