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