微信平台video标签始终在最顶层问题

Posted 2021-04-29 大前端js

这是一个老生常谈的问题，也是每个做微信直播前端心中的痛点,做过微信直播的同学都知道不管video的z-index设置为多小，或者其他元素的z-index比video大多少，video始终在最顶层。

关于这一点官方给出的回答也是相当的，嗯，好吧，我想不到形容词了。。。

X5内核视频播放使用了自研的播放器，考虑用户体验，我们使用了统一的播放界面。如果有相关问题，请联系腾讯浏览服务产品经理做进一步交流

据说官方给出的解决方法现如今有这两种

1. 视频是腾讯域名下的视频

2. 你在微信的白名单当中

但是据说现在白名单通道已经关闭了，这简直是令人无法直视了、、、、

---

终于可能在大众的呼吁下qq浏览器2016年9月份X5内核进行了更新。现在只需要添加 x5-video-player-type=’h5’这样一个属性，就可以了，添加方式如下所示：

<video class="c-h5" src="c-h5.mp4"  x5-video-player-type='h5'></video>

对，就是这么简单一句话。

但是可能很多人试着将这句话加上去了却发现并没有什么用，这不是坑爹吗，原来使用的时候要配合一些东西一起使用。

在你的js中加入这样一句话。

$(document).ready(function(){
    $(window).resize(function(){
        var windowWidth=$(window).innerWidth();        var windowHeight=$(window).innerHeight();
        $('.c-h5').css({
            width:windowWidth,
            height:windowHeight
        })
    })
})

这样通过js获取过的宽高，就可以自适应屏幕的宽高了。这样视频默认是全屏。不过现在视屏的z-index就可以调整了。

---

接下来就是一些优化的问题了。通过上面的一些条件会发现在安卓端，视屏播放的时候，上下两端会出现黑边的问题，增加如x5-video-player-fullscreen=”true”这个属性就行了

<video class="c-h5" src="c-h5.mp4"  x5-video-player-type='h5'x5-video-player-fullscreen="true"></video>

为了防止苹果端播放时全屏，再增加playsinline=”true” webkit-playsinline=”true”属性；

<video class="c-h5" src="c-h5.mp4"  x5-video-player-type='h5'x5-video-player-fullscreen="true" playsinline="true" webkit-playsinline="true"></video>

好了，经过上面几个步骤之后，以后再也不用为video总是在最顶层而烦恼了。赶快去试一下吧！

---

如果还有其他相关不懂的地方，请在下方留言，我看到了并且知道的就会回答的