起因

寫這篇文章是因為在做微信端視訊觀看時出現了很多意料之外的問題，這些問題網上也有很多人碰到，也有一些解決方法，但這些方法，有的不全，有的已經過時。

安卓微信裡播放視訊通常碰到問題是會自動全屏，像下面這樣。造成這種結果的原因是因為在安卓端，微信會使用騰訊開發的x5核心(如果安裝了x5核心的話)來替代安卓手機系統自帶的瀏覽器核心，所以在微信中視訊播放和在系統自帶的瀏覽器或者手機Chrome瀏覽器中表現是不同的。

而iOS微信中使用的是Safari瀏覽器來渲染，問題基本可以忽略。

x5核心和tbs

上面提到了x5核心，那麼x5核心與webkit核心有什麼區別呢？x5核心是騰訊微移動端開發的一個瀏覽器核心，這個核心通常比系統自帶的webkit核心相容性(JavaScript/CSS)要好一點，並且添加了一些其他功能，如文件檢視、視訊小窗播放、支援更多視訊格式等，這一系列的功能稱之為騰訊瀏覽服務(tbs)。開了一扇門就會關上一扇窗，在增加這些功能的同時，必定會埋下許多坑，而這些坑就需要開發者來填。今天說的是視訊播放的坑。

x5核心的安裝及啟用與禁用

• 安裝

一般來說，安裝了QQ瀏覽器就會安裝x5核心，安裝後預設啟用。

對於開發人員來說，可以通過掃描下面的二維碼(二維碼地址為：debugtbs.qq.com/)安裝

點選第三個格子進行安裝

• 啟用與禁用

安裝完成後可以點選第十二個格子來選擇是否禁用tbs。

x5核心的userAgent

當用戶使用安卓微信訪問一個網頁時，使用者可能也不知道自己使用的什麼核心的，簡單的判斷方法是下拉網頁看看是否有"QQ瀏覽器x5核心"，如果有說明使用的是x5核心，如果沒有或者無法下拉出提示說明使用的是系統瀏覽器核心。

x5在userAgent上與其它核心不同，因此可以通過判斷userAgent來判斷當前是否是x5核心。

• 在微信等TBS裡通過UA判斷X5核心版本來區分,當版版本號>036849表示支援

userAgent示例

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN
複製程式碼

所以可以通過JavaScript來判斷，程式碼如下：

var userAgent = navigator.userAgent

function userAgentMatch(regex) {
    return userAgent.match(regex) !== null
}

function isAndroid() {
    return userAgentMatch(/Android/i) && !userAgentMatch(/Windows Phone/i)
}

function isTbsX5() {
    var ua = userAgent
    var res

    if (!isAndroid(ua)) {
        return false
    }
    res = /tbs\/(\d+) /gi.exec(ua)
    if (res) {
        return (res[1] || '') > '036849'
    }
    return false
}
複製程式碼

• 在QQ瀏覽器Android版本中,當瀏覽器版本>=7.1時開始支援

userAgent示例

UserAgent: Mozilla/5.0 (Linux. U. Android 4.4.4. zhcn. OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
複製程式碼

通過JavaScript來判斷如下，程式碼如下：

var userAgent = navigator.userAgent

function userAgentMatch(regex) {
    return userAgent.match(regex) !== null
}

function isAndroid() {
    return userAgentMatch(/Android/i) && !userAgentMatch(/Windows Phone/i)
}
function isQQX5() {
    var ua = userAgent
    var res

    if (!isAndroid(ua)) {
        return false
    }
    res = /MQQBrowser\/([\d+.]+) /gi.exec(ua)
    if (res) {
        return +(res[1] || '') >= 7.1
    }
    return false
}
複製程式碼

所以判斷x5瀏覽器的程式碼就可以寫成下面這樣：

var userAgent = navigator.userAgent

function userAgentMatch(regex) {
    return userAgent.match(regex) !== null
}

function isAndroid() {
    return userAgentMatch(/Android/i) && !userAgentMatch(/Windows Phone/i)
}

function isTbsX5() {
    var ua = userAgent
    var res

    if (!isAndroid(ua)) {
        return false
    }
    res = /tbs\/(\d+) /gi.exec(ua)
    if (res) {
        return (res[1] || '') > '036849'
    }
    return false
}

function isQQX5() {
    var ua = userAgent
    var res

    if (!isAndroid(ua)) {
        return false
    }
    res = /MQQBrowser\/([\d+.]+) /gi.exec(ua)
    if (res) {
        return +(res[1] || '') >= 7.1
    }
    return false
}

function isX5() {
    return isTbsX5() || isQQX5()
}
複製程式碼

x5核心下兩種播放模式

在知道如何區分x5核心後，接下來說x5核心裡視訊播放的三種模式：

1. 預設模式

這是在不對video標籤處理的情況下的預設表現，這種模式的特點是，點選播放就豎屏全屏，視訊位於頁面的正中央，你自己播放器的控制欄會被去除，取而代之的是頁面底部騰訊的播放器控制欄，控制欄最右面會有個橫屏按鈕，在視訊播放完成後，會有騰訊提供的廣告，廣告暫時無法去除。

這種模式下播放，播放就全屏，也就是說在播放視訊時，使用者除了video標籤，網頁上的其他元素都看不到，也就無法在觀看視訊/直播的同時，進行聊天、打賞等互動了。這種模式體驗很差，一般不推薦使用這種模式。

Demo 預設模式

2. 同層模式

同層模式相對於預設模式，解決了預設模式下，視訊自動全屏，無法與頁面其他元素互動的問題。同層模式下，視訊在播放時頁面會觸發resize事件，然後進度同層，進入同層後，頂部左邊有一個”<”按鈕，用於退出播放，頂部右邊有一個“…”按鈕，用於分享和小窗播放。這種模式下，

同層模式有以下特點：

• 1. 視訊不處於最上層，但是視訊的控制條(指video的controls屬性生成的控制條)會消失。因為視訊不處於最上層，所以可以放彈幕和自定義的控制條
• 2. 頁面的寬度為視訊的寬度，如果視訊的寬度小於螢幕寬度，那麼頁面兩邊會有黑邊，且部分黑邊部分應該顯示的內容不顯示
• 3. 頁面document無法滑動，也就是說，如果頁面很長，下面的內容就看不到了
• 4. div內如果overflow為scroll/auto還是可以滑動的，就像現在這個div

同層模式需要在video被新增到頁面前帶上x5-video-player-type, x5-video-player-fullscreen, x5-video-orientation，屬性的具體值可以根據騰訊H5同層播放器接入規範來設定，一般如下：

<video 
  src="./exp.mp4" 
  x5-video-player-type="h5" 
  x5-video-player-fullscreen="true" 
  x5-video-orientation="portrait" 
 controls
></video>

複製程式碼

// 如果是使用js建立，需要在video被新增到dom前設定好
var video = document.createElement('video')
video.setAttribute('controls', '')
video.setAttribute('x5-video-player-type', 'h5')
video.setAttribute('x5-video-player-fullscreen', 'true')
video.setAttribute('x5-video-orientation', 'portrait')

document.body.appendChild(video)

// video被新增到dom後設置不會生效
var video = document.createElement('video')
video.setAttribute('controls', '')

document.body.appendChild(video)

video.setAttribute('x5-video-player-type', 'h5')
video.setAttribute('x5-video-player-fullscreen', 'true')
video.setAttribute('x5-video-orientation', 'portrait')
複製程式碼

除了需要設定屬性外，還需要在視訊播放時，video樣式height值要大於或者等於螢幕高度才能達到效果。 具體可以檢視下面的Demo及程式碼

Demo 同層模式

3. inline模式

inline模式下，播放時始終位於網頁的最頂層，可以理解為video標籤的z-index被設定到無窮大。inline模式相對於同層模式來說，頁面的寬度不受video的寬度限制，頁面上方也不會有返回和設定按鈕，大多數情況推薦使用這種模式。

要啟用video模式，只要在video被新增到頁面前設定好x5-playsinline即可，如下：

Demo inline模式

<video src="./exp.mp4" x5-playsinline="" controls></video>
複製程式碼

總結

對於安卓微信來說，inline模式時最簡單也是體驗較好的，如果有彈幕等需求，就需要使用同層模式，但是使用同層模式需要非常小心的對video的樣式進行控制。