安卓移动端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

  • 浏览器播放组件切换视频时花费的时间能够明显的感知的到。
  • 浏览器播放组件的底色通常是黑色,而咱们的web底色大多时候不是黑色,切换时,会出现闪动。是因为浏览器播放组件的关闭而后再次打开形成的。

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

  1. 咱们要解决弹窗被视频遮挡的问题,此时咱们能够将视频这一节点刷新(删除后再次添加)
  2. 咱们想要切换视频,就先把当前正在播放的视频刷新,而后播放下一个视频。
相关文章
相关标签/搜索