1. 同屏播放視頻

<video src="" x-webkit-airplay="true" webkit-playsinline="true" playsinline />

2. 移動端視頻預加載

由於移動端不能預加載視頻，所以hack一種方案：監聽WXJSBridge WeixinJSBridgeReady，先播放再暫停，這樣當觸發播放視頻時就不用等待，就不會出現黑屏情況。

// 預加載視頻hack
function preload() {
    document.getElementById(‘video‘).play();
    setTimeout(function
 
 () {
        document.getElementById(‘video‘).pause();
    }, 200);                 
}
document.addEventListener("WeixinJSBridgeReady", preload, false);

3. 滑動播放視頻

微信安卓環境下需要在touchmove事件中阻止掉默認事件，否則不能觸發視頻播放

// 滑動或點擊播放視頻
ele.addEventListener(‘touchmove‘, function (event) {
    event.preventDefault();
});
ele.addEventListener(
 
‘touchend‘, function () {
    video.play();
})

4. 微信安卓下視頻異常表現（由於安卓機型眾多，這裏測試過部分機型基本都會出現）

由於微信安卓版本基於x5內核，視頻會出現全屏按鈕，而且去不掉，會誤導用戶點擊，所以一個想法是在微信環境下將視頻一幀幀繪制到canvas上，缺點是低端機型可能會出現花屏情況。

且微信安卓環境下視頻播放時，整個頁面如果有bgm，也會暫停bgm，當視頻播放完畢時，才會繼續播放視頻；ios下不會。

// 繪制視頻到canvas
function video2canvas(){
    var canvas = document.getElementById(‘canvas‘);
    
 
var ctx = canvas.getContext(‘2d‘);//獲取繪圖環境
    var video = document.getElementsByTagName(‘video‘)[0];
    video.play();
    video.addEventListener(‘play‘, function(){
        setInterval(function(){
            ctx.drawImage(video, 0, 0, 200, 200);
        }, 20);
    });
}

部分機型開始播放出現黑屏（當 currentTime 更新時會觸發 timeupdate 事件）。

video.addEventListener(‘timeupdate‘, () => {
    // 當視頻的currentTime大於0.1時表示黑屏時間已過
    if (video.currentTime > 0.1) {
        // 去掉視頻上的浮層
    }
})

安卓下由於由x5內核接管，視頻位於頁面最頂部，播放完可能會有推廣視頻，所以在視頻播放完需要移除掉視頻；也可以監聽ended事件。

video.addEventListener(‘timeupdate‘, () => {
    // 兼容x5，時間為視頻時長
    if (video.currentTime > 10) {
        // 移除視頻
    }
}, false)

5. 視頻壓縮

利用高質量的H264+AAC視頻壓制，壓縮率高達80%（https://maruko.appinn.me/）

6. 視頻參數

獲取當前播放時間點：video.currentTime，也可以直接設置 video.currentTime 的值來控制播放進度；

視頻靜音：muted；

默認樣式：controls；

移動端視頻h5表現問題匯總