前端常见兼容问题系列1：永远置于顶层的video-铭文IT学院

我们接着在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的，你就心里有数啦。