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

一、H5場景介紹

需求：在微信裡開啟一個H5頁面，然後點選按鈕全屏播放視訊，等視訊播放完成後，在視訊上顯示一個跳轉按鈕，點選按鈕跳轉到其他的頁面。

二、遇到的問題

1、IOS裝置微信上，視訊不能預載入，導致視訊播放時黑屏時間較長，策劃不能接受；

2、Android裝置微信上，由於X5核心對video元件做了處理，全屏播放視訊時，會新開一個頁面播放，導致螢幕左上角會出現返回鍵，使用者點選返回鍵，關閉新開的頁面，但是關閉後的頁面顯示效果不好，策劃不能接受；

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

4、新版IOS裝置微信，如果跳轉頁面後，頁面頂部會出現前進/後退的狀態列，返回上層頁面後，之前的跳轉按鈕就會被狀態列遮住，策劃不能接受。

三、解決方案

1、問題一解決方法：

（1）video標籤設定如下圖所示

（2）進入H5首頁，安卓可以預載入視訊，不用處理，IOS可以根據監聽“WeixinJSBridgeReady”事件，提前播放視訊，然後立即關閉視訊的聲音，還需要監聽video元件的“canplaythrough”事件，然後在“canplaythrough”事件的回撥方法裡顯示播放視訊按鈕。

（3）在點選播放按鈕後，立即把視訊的播放時間置為0，然後重新播放。

2、問題二解決方法：

（1）IOS裝置和Android裝置全屏播放視訊顯示效果如下圖所示：

（2）安卓點選左上角返回鍵的時候，呼叫X5提供的退出全屏監聽方法，然後隱藏視訊，顯示首頁。

（3）再次點選視訊播放按鈕，即可接上之前的播放進度。

3、問題三解決方法：

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

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

4、問題四解決方法

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

四、H5體驗地址，做的不夠完美，希望大家多多指導，謝謝！