某日，正在愉快著敲著代碼的我，突然發現了一個詭異的現象，在Android微信中，只要視頻播放后，不能把普通dom元素（div等）覆蓋在video上，就算是z-index為9999999也無法實現，如圖：

我只是播放了一下視頻，怎么結構樣式全部發生了變化，還有我覆蓋在視頻上的小按鈕呢？

●●●

我們知道，Android的微信瀏覽器，是基于X5內核進行渲染。那么，這樣的現象會不會X5的一個bug?經過資料的查詢，發現在Android微信中，video標簽會自動被X5所劫持，換成原生的播放器去播放，也就是說，我們看到的video其實不在是html5規范里面的那個video了，已經被脫離文檔流換成微信的播放器，自然，z-index已經起不到什么作用了，同時播放完成后你甚至可以看到騰訊的廣告（是不是有一萬只草泥馬飄過）。官方的人是這么解釋的：

X5內核視頻播放使用了自研的播放器，考慮用戶體驗，我們使用了統一的播放界面。如果有相關問題，請聯系騰訊瀏覽服務產品經理做進一步交流。（就是這么霸氣~不要問為什么，因為很cooooooool~~~）

那么有沒有什么方法去解決被劫持的問題呢？答案是：有的

方案1

我們發現X5內核加載頁面后，會有這么一段JS代碼注入到頁面中。同時發現這一些網站上的video沒有被劫持，拿bilibili為例，發現bilibili的視頻上只是加了一個（如下圖）但是，對應到我們自己的video加上該屬性，沒有起到任何作用，也就是說，x5內核存在白名單機制，只要申請了白名單，就可以不被劫持，愉快的使用標準的video標簽渲染視頻了。

Q: 那么怎么申請白名單呢？

A:官方已經去掉了申請白名單入口，已經沒有辦法在申請了

Q:既然不能申請白名單，還說什么？浪費時間！

A:這樣才能愉快的介紹方案2

方案2

在瀏覽X5的時候，我們找到了這樣一個文檔（戳閱讀原文可以直接點開）：https://x5.tencent.com/tbs/guide/video.html,?同層瀏覽器，什么意思呢，就是說，如果你在video標簽上添加?x5-video-player-type="h5"?和?x5-video-player-fullscreen="true"就可以實現用元素去覆蓋video這樣一個功能了（初見文檔內心還有一點小激動，可用起來，還有很多坑需要去填）

既然官方已經聲明了可以用，那么我們就用來試試看，根據官方定義，使用同層瀏覽器后，就可以將普通元素覆蓋到video上，但是，聲明同層瀏覽器，會自動在播放視頻的時候，進行全屏，像這樣：

按照官方文檔所述，只要修改video元素的「object-position」屬性，就可以修改視頻部分的顯示位置，但實際上還要把video元素的寬高設成屏幕的寬高才行：

使用NEJ語法改寫如下：

_event._$addEvent(this._videoNode, "x5videoenterfullscreen", this._onx5VideoEnterFullScreen._$bind(this)); _event._$addEvent(this._videoNode, "x5videoexitfullscreen", this._onx5VideoExitFullScreen._$bind(this)); // x5內核瀏覽器全屏_pro._onx5VideoEnterFullScreen = function () {_element._$setStyle(this._videoNode, 'width', window.screen.width + 'px');_element._$setStyle(this._videoNode, 'height', window.screen.height + 'px');_element._$addClassName(document.body,'z-x5-video-fullscreen');}_pro._onx5VideoExitFullScreen = function () {_element._$setStyle(this._videoNode, 'width', '');_element._$setStyle(this._videoNode, 'height', '');_element._$delClassName(document.body,'z-x5-video-fullscreen');_element._$delClassName(document.body,'z-x5-video-fullscreen-landscape');} video{object-position:center top }

改寫后：

使用object-position樣式配合全屏video，就可以將顯示部分加到任意想要的地方了，然后通過給其他元素設置z-index值大于video的z-index，就可以完成覆蓋了

（歡呼，撒花 ╰(°▽°)╯）

你以為文章這么簡單就完了嗎？

太天真了，產品同學是不會提這么簡單的需求的！

產品同學：你的這個不能全屏啊，給加個全屏。

A: 全屏還不容易嗎，全屏api就是requestFullScreen嘛，微信里面就是webkitRequestFullScreen

來我們掉用一下，誒？怎么不對勁，用控制臺打印微信內容，確實有這個方法，怎么調用無效呢；誒，我先調用api，在去播放視頻就可以全屏了；但是我先播放視頻在去調用api發現X5是不會理我們的！！這應該是一個X5的bug，同時還發現，使用video原生controls上的全屏按鈕而不是api也是可以全屏的！

也就是說，在播放的時候去調用全屏api是無法實現全屏的，那么只能通過其他手段來實現全屏，通過不斷的去摸索，發現文檔中介紹了x5內核的video會有這樣一個屬性x5-video-orientation，這個屬性用于控制播放器全屏狀態下是橫屏展示還是豎屏展示，默認是豎屏，那么基于這個屬性，可否間接滿足全屏條件呢。經過探索在調用全屏api時，設置該屬性，可以實時的控制播放器橫屏和豎屏，那么實現就簡單了。

//判斷if (_mobileUtil._$isWeixin() && _mobileUtil._$isAndroid()) { ? ? ? ? ? ? ? ?var node = document.querySelector('#video'); ? ? ? ? ? ? ? ?// 模擬全屏_element._$attr(node, 'x5-video-orientation', 'landscape'); ? ? ? ? ? ? ? ?//添加全屏全局樣式_element._$addClassName(document.body, 'z-x5-video-fullscreen-landscape');setTimeout(function () { ?//因為橫屏寬高發生了變化，所以設置寬高node.style.width = window.screen.width + 'px';node.style.width = window.screen.height + 'px';});} else { ? ? ? ? ? ? ? ?this._rootNode.webkitRequestFullScreen();}

同理，取消全屏，只需要設置x5-video-orientation的值為portrait即可

if (_mobileUtil._$isWeixin() && _mobileUtil._$isAndroid()) { ? ? ? ? ? ? ? ?var node = document.querySelector('.j-mainVideo video');node.setAttribute('x5-video-orientation',"portrait");setTimeout(function () {node.style.width =window.screen.width+'px';node.style.width =window.screen.height+'px';}._$bind(this));} else { ? ? ? ? ? ? ? ?document.webkitCancelFullScreen();}

同時，點擊左上角的按鈕會退出視頻播放，也應該清除全屏

_pro._onx5VideoExitFullScreen = function () {_element._$setStyle(this._videoNode, 'width', '');_element._$setStyle(this._videoNode, 'height', '');_element._$delClassName(document.body,'z-x5-video-fullscreen');_element._$delClassName(document.body,'z-x5-video-fullscreen-landscape'); ?// 退出后需要設置為豎屏全屏，x5內核_element._$attr(this._videoNode, 'x5-video-orientation', 'portrait');}

結果

●●●

x5內核接管了video的播放，體驗和蘋果是不同的，如果能加入白名單最好加入白名單

默認的x5播放器會播放廣告，體驗極差

同級播放器有一定的bug，需要通過一些api手段去規避解決

——【特別推薦】——

歪果仁短視頻花式玩法

總結

以上是生活随笔為你收集整理的Android微信视频播放填坑指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。