記一次微信H5全屏播放視頻的總結

1、H5場景介紹

需求：在微信裏打開一個H5頁面，而後點擊按鈕全屏播放視頻，等視頻播放完成後，在視頻上顯示一個跳轉按鈕，點擊按鈕跳轉到其餘的頁面。

2、遇到的問題

一、IOS設備微信上，視頻不能預加載，致使視頻播放時黑屏時間較長，策劃不能接受；

二、Android設備微信上，因爲X5內核對video組件作了處理，全屏播放視頻時，會新開一個頁面播放，致使屏幕左上角會出現返回鍵，用戶點擊返回鍵，關閉新開的頁面，可是關閉後的頁面顯示效果很差，策劃不能接受；

三、全面屏手機播放視頻，視頻尺寸是1080*1920，爲了避免拉伸視頻，沒有對video標籤的高度作100%的限制，這樣就會出現視頻上面跳轉按鈕定位的問題，若是寫死，各個手機看到的效果有很大差別，策劃不能接受；

四、新版IOS設備微信，若是跳轉頁面後，頁面頂部會出現前進/後退的狀態欄，返回上層頁面後，以前的跳轉按鈕就會被狀態欄遮住，策劃不能接受。

3、解決方案

一、問題一解決方法：

（1）video標籤設置以下圖所示

（2）進入H5首頁，安卓能夠預加載視頻，不用處理，IOS能夠根據監聽「WeixinJSBridgeReady」事件，提早播放視頻，而後當即關閉視頻的聲音，還須要監聽video組件的「canplaythrough」事件，而後在「canplaythrough」事件的回調方法裏顯示播放視頻按鈕。

（3）在點擊播放按鈕後，當即把視頻的播放時間置爲0，而後從新播放。

二、問題二解決方法：

（1）IOS設備和Android設備全屏播放視頻顯示效果以下圖所示：

（2）安卓點擊左上角返回鍵的時候，調用X5提供的退出全屏監聽方法，而後隱藏視頻，顯示首頁。

（3）再次點擊視頻播放按鈕，便可接上以前的播放進度。

三、問題三解決方法：

（1）跳轉按鈕在全面屏和非全屏屏上的顯示效果以下圖所示：

（2）根據已知的視頻寬高比算出頁面視頻顯示區域的高度，而後在算出全面屏底部黑屏的高度便可，這樣就可適配全部尺寸的手機。

四、問題四解決方法

（1）針對IOS設備作了兼容，利用瀏覽頁面歷史記錄替換的方式（妥協的作法，無奈表情），安卓不作處理。

4、H5體驗地址，作的不夠完美，但願你們多多指導，謝謝！