z***@dzpk.com
z***@dzpk.com
  • 发布:2023-06-19 16:40
  • 更新:2023-06-20 06:45
  • 阅读:411

【报Bug】nvue中video全屏后出现层级错误

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: iphone X

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <video class="live-video" is-live autoplay src="" controls></video>  
        <view class="text">  
            操作流程:点video的全屏,再退出全屏,video出现层级错误,被logo图片和文本挡住  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: '退出全屏后这段文本会挡住视频'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        position: relative;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 50rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
    .live-video{  
        width: 750rpx;  
        height: 420rpx;  
        position: absolute;  
        left: 0;  
        top: 0;  
    }  
    .text{  
        margin-top: 100rpx;  
    }  
</style>

操作步骤:

点video的全屏,再退出全屏,video出现层级错误,被logo图片和文本挡住

预期结果:

退出全屏后video不应该被挡住

实际结果:

退出全屏后video被logo图片和文本挡住,层级出现错误

bug描述:

在ios自定义基座测试中,nvue页面video退出全屏后出现层级错误,会被其他元素挡住video。

已上传测试代码

2023-06-19 16:40 负责人:DCloud_iOS_LZY 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

帮助官方排查,确实存在这个问题

LAO_WUUAN

LAO_WUUAN

在 nvue 中,要实现 video 全屏播放,可以通过 uni-mpvue 使用 video 组件或者使用原生的 video 组件,而当 video 组件全屏播放时,可能会出现层级错误的情况。

这种情况的原因可能是因为 video 组件全屏播放时,其层级超出了 nvue 的层级限制,导致出现了层级错误。

解决这种问题的方法可以尝试通过以下两种方式实现:

  1. 在 video 全屏播放时,隐藏 nvue 组件并将其 z-index 设为 -1,在 video 播放结束或者退出全屏时再显示 nvue 组件并将其 z-index 设为 0。

  2. 使用原生的 video 组件,通过 NativeView 实现 video 全屏播放。同时注意,如果在原生组件中使用了视频控制条,还需要注意控制条与原生组件之间的层级关系。

  • z***@dzpk.com (作者)

    暂时使用第一种方法,感谢

    2023-06-20 10:14

要回复问题请先登录注册