安卓挪动端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. 我们想要切换视频,就先把当前正在播放的视频革新,然后播放下一个视频。
    原文作者:lentrue
    原文地址: https://segmentfault.com/a/1190000018355836
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞