H5

前端常见兼容问题系列1:永远置于顶层的video

作者:本站 2017-09-08 浏览:359 标签: video    

在许多安卓手机的UC浏览器中,存在video标签无法被元素遮盖的情况,有可能是UC把video解析成了native控件所致。 Title .content{ position: fixed;

我们接着在video上面遮盖一个层,以方便放置一些内容。于是,我们这么做:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        .content{
            position: fixed;
            top: 0;
            z-index: 999;
            background-color: aqua;
            width: 100%;
            height: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
    <div>遮盖层</div>
</body>
</html>

但是,在小米2S的UC浏览器(Anndroid版本:5.0.2LRX22G)下查看,得到的效果却如图2所示。找了个华为荣耀6 plus(Anndroid版本:4.4.2)的UC浏览器测试,也存在同样的问题。我大胆猜测,估计又很多的安卓手机上的UC浏览器中都会有此问题。


video怎么跑到遮盖曾的顶上来了?是它的z-index过大吗?通过在页面的</body>之前增加代码

<script>alert(window.getComputedStyle(document.querySelector('video'),null).getPropertyValue('z-index'));</script>

把video的z-index打印出来,发现是'auto'。所以,并不是video的z-index过大的问题。由此可见,这是video标签在UC浏览器下的一个bug。

网上搜索一番,发现有人讨论说这可能是UC把video解析成了native控件,看起来不无道理,但并无官方的确认信息。暂且就知道有这么个问题吧。下回再收到一个要在视频上盖点东西的需求,又必需兼容UC的,你就心里有数啦。


  • 1

  • 0

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.如有文章有版权争议,请给我们留言或者邮件告知我们,邮箱地址:028mw@126.com。