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

共计 632 个字符，预计需要花费 2 分钟才能阅读完成。

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 标签，浏览器的视频播放组件会立即消失，时间大幅度缩短。比如：

我们要解决弹窗被视频遮挡的问题，此时我们可以将视频这一节点刷新（删除后再次添加）
我们想要切换视频，就先把当前正在播放的视频刷新，然后播放下一个视频。