微信播放最大坑
h5頁面分享到微信上播放視頻，最大的坑就是在Android手機上，X5瀏覽器會劫持Video標簽用騰訊播放器彈出全屏播放，處于最上層著榴，覆蓋DOM元素，更可惡的是播放完畢時屁倔，會出現(xiàn)很多騰訊的廣告視頻脑又，比如：
同層播放
X5瀏覽器為了解決覆蓋DOM元素的問題，提出了一個同層播放的概念锐借，通俗一點講就是視頻播放還是要彈出全屏的问麸，但是視頻可以不覆蓋DOM元素，可以和視頻在同一層瞎饲，雖然這方案有點別扭口叙，但總算解決了覆蓋DOM元素的問題，特別是對于H5直播來說非常重要嗅战，可參考X5的同層播放
同層播放的實現(xiàn)
雖然X5提供了一些屬性可以用于同層播放的設置，但是還是有一些細節(jié)需要處理：
X5彈出全屏播放時，需要訂閱resize和全屏事件驮捍，對于video以及容器大小的調整
點擊微信頂部的返回按鈕時疟呐，退出全屏播放時，需要訂閱退出全屏事件东且，根據(jù)業(yè)務實際情況處理启具，比如有的場景需要關閉當前頁面，給用戶一種退出當前頁面的體驗珊泳。
設置視頻的顯示位置鲁冯， 比如全屏直播視頻要全屏顯示，普通的播放視頻在左上角顯示色查，點擊全屏按鈕時薯演，又要居中顯示。
很多細節(jié)的東西需要處理秧了， 發(fā)現(xiàn)Aliplayer播放器在最新發(fā)布的版本中支持了X5瀏覽器的h5的同層播放跨扮，并且很多細節(jié)的東西幫助實現(xiàn)了，下面使用Aliplayer實現(xiàn)了兩個例子：
點播視頻
視頻點播的一般的布局是上半部分為視頻播放區(qū)域验毡，下半部分為播放列表和評論區(qū)域衡创，在Android 微信上的播放效果如下：
代碼可以參考點播視頻H5Demo
創(chuàng)建播放器
通過 x5_video_position和 x5_type屬性指定視頻的顯示位置和啟用H5同層播放
var player = new Aliplayer({
id: 'J_prismPlayer',
autoplay: true,
isLive:false,
playsinline:true,
controlBarVisibility:'always',
source:"",
useH5Prism:true,
x5_video_position:'top', //指定視頻在上部顯示
x5_type:'h5' //聲明啟用同層H5播放器，支持的值：h5
});
彈出全屏播放時的處理
這里主要分兩種情況：
在點擊播放按鈕開始播放時晶通，微信劫持視頻彈出全屏播放璃氢，這時候Aliplayer也會觸發(fā)全屏事件，在這里調用取消全屏方法狮辽。
用戶點擊Controlbar上的全屏按鈕時拔莱，這個時候也會觸發(fā)全屏事件，在這里可以調整視頻為居中顯示隘竭。
上面兩種情況的處理有點不一樣的
this._firstFullscreen = true;
let that = this;
this.player.on('requestFullScreen',(e)=>{
if(that._firstFullscreen)
{
that.player.cancelFullScreen();
that._firstFullscreen = false;
}
else
{
let video=$(that.player.el()).find('video');
video.addClass('center');
}
});
視頻居中的樣式
video.center
{
object-position:50% 50% !important;
}
退出全屏時恢復視頻頂部播放
退出全屏的時候會出發(fā)事件塘秦，在事件里移除居中的樣式
this.player.on('cancelFullScreen',(e)=>{
let video=$(that.player.el()).find('video');
video.removeClass('center');
})
直播全屏播放
直播場景下會把視頻充滿整個屏幕，在上面顯示評論动看、點贊尊剔、主播和觀眾信息等，比如：
代碼可以參考全屏直播H5LiveDemo
創(chuàng)建播放器
通過x5_fullscreen和 x5_type屬性指定視頻全屏播放和啟用H5同層播放菱皆，另外需要去掉Controlbar须误，要通過skinLayout自定義UI。
var player = new Aliplayer({
id: 'J_prismPlayer',
autoplay: true,
isLive:true,
playsinline:true,
controlBarVisibility:'always',
source:"",
useH5Prism:true,
x5_fullscreen:true, //全屏播放
x5_type:'h5', //聲明啟用同層H5播放器仇轻，支持的值：h5
skinLayout:[
{name:"bigPlayButton", align:"blabs", x:"70", y:"150"},
{name: "H5Loading", align: "cc"}
]
});
彈出全屏播放時的處理
在點擊播放按鈕開始播放時京痢，微信劫持視頻彈出全屏播放，這時候Aliplayer也會觸發(fā)全屏事件篷店，在這里調用取消全屏方法祭椰，并且調整評論臭家、點贊等的布局。
let that = this;
this.player.on('requestFullScreen',(e)=>{
that.adjustLayout(true);
that.player.cancelFullScreen();
});
改變視頻顯示方式
全屏播放視頻默認是平鋪的方淤，如果想不平鋪可以設置object-fit的樣式為contain或其它
video{
object-fit: contain !important;
}
微信返回時關閉頁面
微信在原來的頁面上面打開另一個頁面全屏播放視頻钉赁， 如果正常流程返回時，是返回到程序原來的頁面携茂，我希望是返回時直接關閉頁面你踩。
this.player.tag.addEventListener("x5videoexitfullscreen",()=>{
if(WeixinJSBridge)
WeixinJSBridge.call('closeWindow');
});
視頻顯示模式和位置
如果"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代碼
img{
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position:100%10%;
}
效果
