X5同層播放器試用報告

移動端瀏覽器中的video元素是比較特別的，早期不管是在iOS仍是Android的瀏覽器中，它都位於頁面的最頂層，沒法被遮蓋。後來這個問題在iOS下獲得瞭解決，可是Android的瀏覽器則問題依舊。X5是騰訊基於Webkit開發的渲染引擎，它提供了一種名叫「同層播放器」的特殊video元素以解決遮蓋問題。

簡單使用

同層播放器的使用方式跟普通的video元素差異不大，只是須要加上兩個X5的自定義屬性：「x5-video-player-type」和「x5-video-player-fullscreen」。

下面作一個測試頁面嵌入同層播放器：

body {
    margin: 0;
    background: #000;
    font-size: 0.3rem;
}
.player {
    width: 100%;
    height: 4.22rem;
}
.player .video {
    width: 100%;
    height: 100%;
}
複製代碼

<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
    <source src="video.mp4" />
</video>
複製代碼

點擊播放後，video元素佔全屏，視頻部分默認居中顯示：

調整位置

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

.fullscreen .video {
    object-position: center top;
}
複製代碼

var player = document.getElementById('video');
player.addEventListener('x5videoenterfullscreen', function() {
    // 設爲屏幕尺寸
    player.style.width = window.screen.width + 'px';
    player.style.height = window.screen.height + 'px';
    // 在body上添加樣式類以控制全屏下的展現
    document.body.classList.add('fullscreen');
});
player.addEventListener('x5videoexitfullscreen', function() {
    player.style.width = player.style.height = '';
    document.body.classList.remove('fullscreen');
}, false);
複製代碼

效果以下（右圖）：

注意把video元素的高設爲屏幕高度時，要用「window.screen.height」而不能用「document.documentElement.clientHeight」，由於後者不包含導航欄高度，將會致使沒法滿屏（如上方左圖所示）。

全屏狀態下的佈局

下面加上標題欄：

.header {
    width: 100%;
    height: 1.14rem;
    line-height: 1.14rem;
    background: #fff;
    font-size: 0.36rem;
    text-align: center;
    color: #000;
}
複製代碼

<header id="header" class="header">標題欄</header>
<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
        <source src="video.mp4" />
    </video>
</div>
複製代碼

然而，點擊播放進入全屏狀態後，標題欄就消失不見了。既然同層播放器是能夠被遮蓋的，那就試試絕對定位吧：

.fullscreen .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}
複製代碼

標題欄確實遮擋住視頻了，可是就多了一層黑色的漸變以及左右兩個按鈕（下方左圖）。據官方文檔所述，這些都是沒法移除的。

接下來要作的是把視頻下移，使總體UI與進入全屏前保持一致（上方右圖）：

.fullscreen .player .video {
    object-position: center 1.14rem;
}
複製代碼

下一步是在video元素後面添加其餘內容：

.main {
    height: 5rem;
    background: #fff;
}
.main .inner {
    padding: 0.3rem;
}
複製代碼

<header id="header" class="header">標題欄</header>
<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
        <source src="video.mp4" />
    </video>
</div>
<div id="main" class="main">
    <div class="inner">這裏是其餘內容</div>
</div>
複製代碼

然而，進入全屏狀態後，內容元素向上偏移了（下方左圖）。

明顯地，該元素的位置也要下移標題欄的高度：

.fullscreen .main {
    margin-top: 1.14rem;
}
複製代碼

接下來嘗試簡單的點擊事件響應：

var main = document.getElementById('main');
main.addEventListener('click', function() {
    this.querySelector('.inner').innerHTML = Date.now();
}, false);
複製代碼

此時進入全屏狀態後點擊內容元素是沒有任何反應的，由於video元素佔滿屏，而它的層級偏高，把內容元素擋住了。知道問題以後，解決方案也很簡單，只要把main元素的層級調高就行了：

.fullscreen .main {
    position: relative;
}
複製代碼

橫屏狀態下進入全屏

由於同層播放器的全屏狀態只能指定一個方向（默認爲豎屏），因此播放後仍是會強制豎屏。此時總體效果都不太對勁：

由於橫屏狀態的寬高與豎屏狀態下的恰好相反，因此才致使恢復豎屏時的UI異常。所以，進入全屏時要判斷一下寬高，若是寬大於高，則將其交換：

player.addEventListener('x5videoenterfullscreen', function() {
    var width = window.screen.width;
    var height = window.screen.height;
    if (width > height) {
        width = [height, height = width][0];
    }
    player.style.width = width + 'px';
    player.style.height = height + 'px';

    document.body.classList.add('fullscreen');
}, false);
複製代碼

其餘問題

若是播放前頁面有滾動條，進入全屏狀態下能夠滾動嗎？答案是確實能夠滾動，可是與其叫滾動，不如叫抖動，具體效果能夠本身嘗試。總之進入全屏狀態後就不要用頁面的滾動了，而是用局部滾動。此外還應注意，由於調高了層級，若是內容元素過高，就會擋住視頻的控制條。

最後一個問題是，播放某些格式的視頻時，進度條會出現錯亂，即便返回非全屏模式時也仍是錯亂。

總結

• 關於同層播放器的支持狀況，官方文檔有詳細描述，最新的微信、QQ以及QQ瀏覽器都能支持，可是僅限Android平臺。
• 雖然同層播放器能夠解決遮蓋video元素的問題，但這畢竟仍是X5 Only的技術。若是頁面要在非騰訊系的產品中打開，那就要注意處理兼容問題。
• 同層播放器以前的元素，要用絕對定位或固定定位才能展現出來；而其後的元素，只要往下偏移（播放器元素「object-position」指定的偏移）而且提升層級，就與未播放時無異了。

本文也發佈在做者我的博客：X5同層播放器試用報告 | 前端開發 | Heero's Blog