本文鏈接：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