H5的video 在安卓浏览器上层级问题

项目场景:

H5的video 在安卓浏览器上层级问题

问题描述

H5的video 在安卓浏览器上层级问题


原因分析:

目前猜测是浏览器劫持video并且生成原生视频播放器 无法用z-index控制

解决方案:

目前除了QQ 浏览器 跟小米浏览器无法完美兼容 其他都能兼容
// raw-controls 兼容钉钉跟UC
//controls360 兼容360浏览器
//x5-video-player-type兼容微信内置
//搜狗浏览器也能兼容到
QQ 浏览器 跟小米浏览器 可以学优酷视频那样 打开弹出框时候video 隐藏 再加上一个占位图


<video 
                                x-webkit-airplay
                                webkit-playsinline 
                                x5-video-player-type='h5-page'
                                x5-video-orientation="portraint"
                                playsinline
                                preload
                                controls
                                raw-controls
                                controls360=no  
                                x5-video-player-fullscreen=''
                                ref="video"
                                 :poster="item.img"
                                :src="item.src"
                                :playOrPause="playOrPause"
                                ></video>
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uniapp中的video标签默认是最高层级的,这意味着在页面中其他元素无法盖住video标签。这是因为video标签常常被用于播放视频内容,需要保持在最顶层以显示在用户的视觉范围内。 然而,有时候我们可能希望在视频上方添加一些交互元素,如按钮、文本等,但又希望它们能够盖住video标签。在这种情况下,我们可以通过调整元素的层级关系来实现。 一种解决方案是使用CSS的position属性来调整元素的层级关系。我们可以将需要盖住video标签的元素设置为相对或绝对定位,并使用较高的z-index值来将其置于video标签的上方。 另一种解决方案是通过在video标签之上添加额外的遮罩层元素来实现。我们可以添加一个div元素,并设置其宽高与video标签相同,并将其设置为半透明的背景色。然后,将需要显示在视频上方的元素添加到这个遮罩层中,从而实现视频下方的元素被遮盖。 需要注意的是,对于iOS设备,由于浏览器的限制,video标签的层级可能无法调整。在这种情况下,我们可以尝试使用canvas标签来代替video标签,并通过canvas的drawVideo方法将视频绘制到页面上。由于canvas标签的层级可以通过CSS进行调整,这样就能够实现视频下方元素的遮盖效果。 综上所述,虽然默认情况下uniapp中的video标签层级较高,但通过一些CSS技巧或使用canvas替代video标签,我们仍然可以实现视频下方元素的遮盖效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值