当前位置: 首页 > Web前端 > CSS

Android移动端的video标签覆盖页面元素

时间:2023-03-30 23:30:14 CSS

1。Android上的video标签在播放时会被浏览器接管。此时已经脱离了文档流,和文档不在一个层次,所以设置z-index是无效的。2、Android下qq的x5内核浏览器提供了相关属性。它们是:x5-playsinline:在线播放。x5-video-player-type="h5":播放级别为文档级别。如果页面上只有一个视频,视频用在页面的顶部,会比较赏心悦目。不然你会发现,呃。..播放视频的时候乱七八糟。所以在移动端,不建议做video和dom重叠的设计。如果必须,请继续阅读。以下内容范围:Android1.视频播放前,video标签是一个普通的文档元素,z-index也是有效的。这时候高层的dom就可以显示在video标签区域的上方了。2、video标签播放过程中和播放结束后,dom会被覆盖。3、浏览器同时只能播放一个视频标签。切换播放视频内容时体验不是很好:切换视频时浏览器播放组件的耗时可以明显感知。浏览器播放组件的背景色一般是黑色的,但是我们的网页背景色大部分时候不是黑色的,切换的时候会闪烁。是关闭再打开浏览器播放组件引起的。解决思路:1、删除并添加video标签节点,会使video标签恢复到1中的状态。2、删除video标签,浏览器的视频播放组件会立即消失,时间会大大缩短。比如:我们要解决弹窗被视频挡住的问题。这个时候我们可以刷新video节点(删除再添加)。如果我们要切换视频,我们先刷新当前正在播放的视频,然后再播放下一个视频。