资讯专栏INFORMATION COLUMN

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

LinkedME2016 / 2985人阅读

摘要:安卓端下的标签播放时会被浏览器接管。安卓下的内核浏览器,提供了相关属性。以下内容范围安卓在未被播放之前,标签属于正常文档元素,也是生效的。标签播放中和播放之后均会覆盖。删除标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。

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

我们要解决弹窗被视频遮挡的问题,此时我们可以将视频这一节点刷新(删除后再次添加)

我们想要切换视频,就先把当前正在播放的视频刷新,然后播放下一个视频。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117459.html

相关文章

  • 安卓移动video标签页面元素覆盖

    摘要:安卓端下的标签播放时会被浏览器接管。安卓下的内核浏览器,提供了相关属性。以下内容范围安卓在未被播放之前,标签属于正常文档元素,也是生效的。标签播放中和播放之后均会覆盖。删除标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。 1.安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。2.安卓下qq的x5内核浏览器,...

    iamyoung001 评论0 收藏0
  • 安卓移动video标签页面元素覆盖

    摘要:安卓端下的标签播放时会被浏览器接管。安卓下的内核浏览器,提供了相关属性。以下内容范围安卓在未被播放之前,标签属于正常文档元素,也是生效的。标签播放中和播放之后均会覆盖。删除标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。 1.安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。2.安卓下qq的x5内核浏览器,...

    wall2flower 评论0 收藏0
  • 安卓移动video标签页面元素覆盖

    摘要:安卓端下的标签播放时会被浏览器接管。安卓下的内核浏览器,提供了相关属性。以下内容范围安卓在未被播放之前,标签属于正常文档元素,也是生效的。标签播放中和播放之后均会覆盖。删除标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。 1.安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。2.安卓下qq的x5内核浏览器,...

    trilever 评论0 收藏0
  • css前初始化

    摘要:初入前端,若有不足欢迎指正头部初始化标签问题一般要添加背景音乐的话,我们的第一反应就是使用标签,但是这里有一个坑。 前言 当下移动端横行,平常我们做一些移动端的项目,接触最多的就是H5,虽然做移动端不用兼容IE,但是 我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。 初入前端,若有不足 欢迎指正! 头部初始化 ...

    mikyou 评论0 收藏0
  • css前初始化

    摘要:初入前端,若有不足欢迎指正头部初始化标签问题一般要添加背景音乐的话,我们的第一反应就是使用标签,但是这里有一个坑。 前言 当下移动端横行,平常我们做一些移动端的项目,接触最多的就是H5,虽然做移动端不用兼容IE,但是 我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。 初入前端,若有不足 欢迎指正! 头部初始化 ...

    宠来也 评论0 收藏0

发表评论

0条评论

LinkedME2016

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<