1. 同屏播放視頻 2. 移動端視頻預載入 由於移動端不能預載入視頻，所以hack一種方案：監聽WXJSBridge WeixinJSBridgeReady，先播放再暫停，這樣當觸發播放視頻時就不用等待，就不會出現黑屏情況。 3. 滑動播放視頻 微信安卓環境下需要在touchmove事件中阻止掉預設 ...
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)
video.addEventListener('ended', () => {})
5. 視頻壓縮
利用高質量的H264+AAC視頻壓制，壓縮率高達80%（https://maruko.appinn.me/）
6. 視頻參數
獲取當前播放時間點：video.currentTime，也可以直接設置 video.currentTime 的值來控制播放進度；
視頻靜音：muted；
預設樣式：controls；
