微信直播video安卓端始终在最顶层的解决方法

本文链接：https://blog.csdn.net/qq_22557797/article/details/66973548
这是一个老生常谈的问题，也是每个做微信直播前端心中的痛点,做过微信直播的同学都知道不管video的z-index设置为多小，或者其他元素的z-index比video大多少，video始终在最顶层。

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

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

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

视频是腾讯域名下的视频
你在微信的白名单当中
但是据说现在白名单通道已经关闭了，这简直是令人无法直视了、、、、

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

<video class="c-h5" src="c-h5.mp4" x5-video-player-type='h5'></video>
1
对，就是这么简单一句话。

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

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

$(document).ready(function(){
$(window).resize(function(){
var windowWidth=$(window).innerWidth();
var windowHeight=$(window).innerHeight();
$('.c-h5').css({
width:windowWidth,
height:windowHeight
})
})
})
1
2
3
4
5
6
7
8
9
10
这样通过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>
1
为了防止苹果端播放时全屏，再增加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>
1
好了，经过上面几个步骤之后，以后再也不用为video总是在最顶层而烦恼了。赶快去试一下吧！
————————————————
版权声明：本文为CSDN博主「深谷逸风」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_22557797/article/details/66973548