Tckin
Tckin
  • 发布:2020-05-14 17:53
  • 更新:2020-05-21 11:35
  • 阅读:1426

【报Bug】安卓h5页面上video层级的问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 家庭中文版 18362.778

HBuilderX类型: 正式

HBuilderX版本号: 2.6.16

浏览器平台: 微信内置浏览器

浏览器版本: 7.0.14

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="page">  
        <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">  
            <cover-view class="controls-title">简单的自定义 controls</cover-view>  
            <cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>  
            <cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>  
        </video>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {}  
        },  
        mounted() {  
            this.videoCtx = uni.createVideoContext('demoVideo')  
        },  
        methods: {  
            play(event) {  
                this.videoCtx.play();  
                uni.showToast({  
                    title: '开始播放',  
                    icon: 'none'  
                });  
            },  
            pause(event) {  
                this.videoCtx.pause();  
                uni.showToast({  
                    title: '暂停播放',  
                    icon: 'none'  
                });  
            }  
        }  
    }  
</script>  
<style>  
    .page {  
        display: flex;  
        justify-content: center;  
    }  

    .video {  
        position: relative;  
    }  

    cover-view,  
    cover-image {  
        display: inline-block;  
    }  

    .img {  
        position: absolute;  
        width: 100rpx;  
        height: 100rpx;  
        top: 50%;  
        margin-top: -50rpx;  
    }  

    .controls-play {  
        left: 50rpx;  
    }  

    .controls-pause {  
        right: 50rpx;  
    }  

    .controls-title {  
        width: 100%;  
        text-align: center;  
        color: #FFFFFF;  
    }  
</style>

操作步骤:

在安卓机上的微信浏览器上打开该h5页面,并点击播放视频,看video上面的图层能否正常显示

预期结果:

视频正常播放,视频上的图层能正常显示

实际结果:

视频正常播放,视频上的图层无法显示,或者被视频遮挡住了

bug描述:

video组件层级问题

在安卓机上的微信浏览器内打开的h5页面上,在video组件上放一层显示播放量类似的图层,该图层在视频播放后就不显示了,可能是因为video的层级太高遮挡住了,换用cover-view展示该播放量图层依然不显示,最后换用nvue页面依然有相同的问题,该问题目前只在安卓机的微信浏览器上的h5页面上发现。示例使用的是官方的示例在该环境中一样能重现该问题。

2020-05-14 17:53 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com - 111111

这个所有浏览器看好像都会给遮挡病不止是微信浏览器吧

  • Tckin (作者)

    我这边就在安卓微信浏览器中看是这样,同样的环境在ios上就是正常显示的

    2020-05-26 17:31

该问题目前已经被锁定, 无法添加新回复