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

最新推荐文章于 2024-04-16 17:51:19 发布

weixin_34234721

最新推荐文章于 2024-04-16 17:51:19 发布

阅读量1k

点赞数

文章标签：前端 ViewUI

原文链接：https://yq.aliyun.com/articles/64418

版权

上一篇我们把消失的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的，你就心里有数啦。

weixin_34234721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见兼容问题系列3：永远置于顶层的video

上一篇我们把消失的video找了出来。这一篇我们接着在video上面遮盖一个层，以方便放置一些内容。于是，我们这么做：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="format-d...
复制链接

扫一扫