上一篇我们把消失的video找了出来。这一篇我们接着在video上面遮盖一个层，以方便放置一些内容。于是，我们这么做：
<!DOCTYPE html>
<html lang="en">
<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 class="content">遮盖层</div>
</body>
</html>
我们期待的效果如图1:
图1
但是，在小米2S的UC浏览器（Anndroid版本：5.0.2LRX22G）下查看，得到的效果却如图2所示。找了个华为荣耀6 plus（Anndroid版本：4.4.2）的UC浏览器测试，也存在同样的问题。我大胆猜测，估计又很多的安卓手机上的UC浏览器中都会有此问题。
图2
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的，你就心里有数啦。
时间： 2024-09-17 03:42:16