微信播放最大坑
h5頁面分享到微信上播放視訊，最大的坑就是在Android手機上，X5瀏覽器會劫持Video標籤用播放器彈出全屏播放，處於最上層，覆蓋DOM元素，而且播放完畢時，會出現廣告視訊，比如：
同層播放
X5瀏覽器為了解決覆蓋DOM元素的問題，提出了一個同層播放的概念，通俗一點講就是視訊播放還是要彈出全屏的，但是視訊可以不覆蓋DOM元素，可以和視訊在同一層，雖然這方案有點彆扭，但總算解決了覆蓋DOM元素的問題，特別是對於H5直播來說非常重要。
同層播放的實現
雖然X5提供了一些屬性可以用於同層播放的設定，但是還是有一些細節需要處理：
X5彈出全屏播放時，需要訂閱resize和全屏事件，對於video以及容器大小的調整
點選微信頂部的返回按鈕時，退出全屏播放時，需要訂閱退出全屏事件，根據業務實際情況處理，比如有的場景需要關閉當前頁面，給使用者一種退出當前頁面的體驗。
設定視訊的顯示位置， 比如全屏直播視訊要全屏顯示，普通的播放視訊在左上角顯示，點選全屏按鈕時，又要居中顯示。
很多細節的東西需要處理， Aliplayer播放器在最新發布的版本中支援了X5瀏覽器的h5的同層播放，並且很多細節的東西幫助實現了，下面使用Aliplayer實現了兩個例子：
點播視訊
視訊點播的一般的佈局是上半部分為視訊播放區域，下半部分為播放列表和評論區域，在Android 微信上的播放效果如下：
程式碼可以參考點播視訊H5Demo
建立播放器
通過 x5_video_position和 x5_type屬性指定視訊的顯示位置和啟用H5同層播放
彈出全屏播放時的處理
這裡主要分兩種情況：
1.在點選播放按鈕開始播放時，微信劫持視訊彈出全屏播放，這時候Aliplayer也會觸發全屏事件，在這裡呼叫取消全屏方法。注：播放器以後會實現這個邏輯
2.使用者點選Controlbar上的全屏按鈕時，這個時候也會觸發全屏事件，在這裡可以調整視訊為居中顯示。
上面兩種情況的處理有點不一樣的
視訊居中的樣式
退出全屏時恢復視訊頂部播放
退出全屏的時候會出發事件，在事件裡移除居中的樣式
直播全屏播放
直播場景下會把視訊充滿整個螢幕，在上面顯示評論、點贊、主播和觀眾資訊等，比如：
程式碼可以參考全屏直播H5LiveDemo
建立播放器
通過x5_fullscreen和 x5_type屬性指定視訊全屏播放和啟用H5同層播放，另外需要去掉Controlbar，要通過skinLayout自定義UI。
彈出全屏播放時的處理
在點選播放按鈕開始播放時，微信劫持視訊彈出全屏播放，這時候Aliplayer也會觸發全屏事件，在這裡呼叫取消全屏方法，並且調整評論、點贊等的佈局。
改變視訊顯示方式
全屏播放視訊預設是平鋪的，如果想不平鋪可以設定object-fit的樣式為contain或其它
微信返回時關閉頁面
微信在原來的頁面上面開啟另一個頁面全屏播放視訊， 如果正常流程返回時，是返回到程式原來的頁面，我希望是返回時直接關閉頁面。
視訊顯示模式和位置
如果"x_video_position"的兩個值top和center不能滿足要求，可以通過自定義object-fit和object-position屬性，進行更靈活的設定視訊的顯示模式和位置。
object-fit屬性
該object-fit CSS屬性指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框
可選的值：
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
每個值的效果：
object-position屬性
object-position CSS屬性控制替換內容位置，和background-position屬性很類似比如：
css程式碼
效果
本文作者：沐欽