博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
安卓移动端video标签将页面元素覆盖。
阅读量:6429 次
发布时间:2019-06-23

本文共 647 字,大约阅读时间需要 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标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。
比如:

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

转载地址:http://wkiga.baihongyu.com/

你可能感兴趣的文章
深入浅出换肤相关技术以及如何实现
查看>>
Redis 基础、高级特性与性能调优
查看>>
React native 第三方组件 React native swiper
查看>>
接口幂等设计
查看>>
编程入门指南
查看>>
移动端的自适应方案—REM
查看>>
你真的懂volatile吗
查看>>
Android 编译时注解-提升
查看>>
说说 Spring AOP 中 @Aspect 的高级用法
查看>>
Workbox CLI中文版
查看>>
贝聊亿级数据库分库分表实践
查看>>
同时连接gitlab和github
查看>>
vuex源码分析
查看>>
tornado+datatables分页
查看>>
集成 Kubernetes 与 Cloud Foundry,IBM自有一套
查看>>
php 中英文字符分割
查看>>
No module named yum
查看>>
Shell处理用户输入参数----getopts
查看>>
【函数】06、装饰器的应用
查看>>
v$sysstat
查看>>