安卓移动端video标签将页面元素覆盖。

1.安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。
2.安卓下qq的x5内核浏览器,提供了相关属性。分别为:x5-playsinline:行内播放。x5-video-player-type="h5":播放层级为文档层级。如果页面只有一个视频而且该视频在页面的顶部用起来还是比较顺心的。否则会发现,额。。。播放视频的时候会紊乱的。
所以移动端中,不建议做视频和dom重合的设计。
如果一定要做,请继续阅读。
以下内容范围:安卓
1.在video未被播放之前,video标签属于正常文档元素,z-index也是生效的。此时层级高的dom可以展示在video标签区域上方。
2.video标签播放中和播放之后均会覆盖dom。
3.浏览器同时只能播放一个video标签。当切换播放视频内容时体验不是很好:

  • 浏览器播放组件切换视频时花费的时间可以明显的感知的到。
  • 浏览器播放组件的底色一般是黑色,而我们的web底色大多时候不是黑色,切换时,会出现闪动。是由于浏览器播放组件的关闭然后再次打开造成的。

解决思路:
1.删除和添加video标签这一节点,这样做会让video标签恢复到1中的状态。
2.删除video标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。
比如:

  1. 我们要解决弹窗被视频遮挡的问题,此时我们可以将视频这一节点刷新(删除后再次添加)
  2. 我们想要切换视频,就先把当前正在播放的视频刷新,然后播放下一个视频。
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值