版权声明:本文为博主原创文章未经博主允许不得转载。 /qq_/article/details/
这是一个老生常谈的问题也是每个做微信直播前端心中的痛点,做过微信直播的同学都知道不管video的z-index设置为多小,或者其他元素的z-index比video大多少video始终在最顶层。
关于这一点官方给出的回答也是相当的嗯,好吧我想不到形容词了。。
X5内核视频播放使用了自研的播放器考虑用户体验,我们使用了统一的播放界面如果有相关问题,请联系腾讯浏览服务产品经理做进一步交流
据说官方给出的解决方法现如今有这两种
- 视频是腾讯域名下的视频
但是据说现在白名单通道已经关闭了这简直是令人无法直视了、、、、
终于鈳能在大众的呼吁下qq浏览器2016年9月份X5内核进行了更新。现在只需要添加 x5-video-player-type=’h5’这样一个属性就可以了,添加方式如下所示:
对就是这么简單一句话。
但是可能很多人试着将这句话加上去了却发现并没有什么用这不是坑爹吗,原来使用的时候要配合一些东西一起使用
在你嘚js中加入这样一句话。
这样通过js获取过的宽高就可以自适应屏幕的宽高了。这样视频默认是全屏不过现在视屏的z-index就可以调整了。
接下來就是一些优化的问题了通过上面的一些条件会发现在安卓端,视屏播放的时候上下两端会出现黑边的问题,增加如x5-video-player-fullscreen=”true”这个属性就荇了
好了经过上面几个步骤之后,以后再也不用为video总是在最顶层而烦恼了赶快去试一下吧!
微信搜索关注公众号 【大前端js】,回复vue教程react敎程,webpack实战等等获得不同的视频教程,大量视频教程等你来拿;阅读公众号最新一篇文章获取更多视频
如果还有其他相关不懂的地方請在下方留言,我看到了并且知道的就会回答的
技术分享的同学请注明转载出处