微信播放最大坑
h5頁面分享到微信上播放視頻，最大的坑就是在Android手機(jī)上，X5瀏覽器會(huì)劫持Video標(biāo)簽用騰訊播放器彈出全屏播放，處于最上層，覆蓋DOM元素，更可惡的是播放完畢時(shí)，會(huì)出現(xiàn)很多騰訊的廣告視頻，比如：
同層播放
X5瀏覽器為了解決覆蓋DOM元素的問題，提出了一個(gè)同層播放的概念，通俗一點(diǎn)講就是視頻播放還是要彈出全屏的，但是視頻可以不覆蓋DOM元素，可以和視頻在同一層，雖然這方案有點(diǎn)別扭，但總算解決了覆蓋DOM元素的問題，特別是對(duì)于H5直播來說非常重要，可參考X5的同層播放
同層播放的實(shí)現(xiàn)
雖然X5提供了一些屬性可以用于同層播放的設(shè)置，但是還是有一些細(xì)節(jié)需要處理：
X5彈出全屏播放時(shí)，需要訂閱resize和全屏事件，對(duì)于video以及容器大小的調(diào)整
點(diǎn)擊微信頂部的返回按鈕時(shí)，退出全屏播放時(shí)，需要訂閱退出全屏事件，根據(jù)業(yè)務(wù)實(shí)際情況處理，比如有的場(chǎng)景需要關(guān)閉當(dāng)前頁面，給用戶一種退出當(dāng)前頁面的體驗(yàn)。
設(shè)置視頻的顯示位置， 比如全屏直播視頻要全屏顯示，普通的播放視頻在左上角顯示，點(diǎn)擊全屏按鈕時(shí)，又要居中顯示。
很多細(xì)節(jié)的東西需要處理， 發(fā)現(xiàn)Aliplayer播放器在最新發(fā)布的版本中支持了X5瀏覽器的h5的同層播放，并且很多細(xì)節(jié)的東西幫助實(shí)現(xiàn)了，下面使用Aliplayer實(shí)現(xiàn)了兩個(gè)例子：
點(diǎn)播視頻
視頻點(diǎn)播的一般的布局是上半部分為視頻播放區(qū)域，下半部分為播放列表和評(píng)論區(qū)域，在Android 微信上的播放效果如下：
代碼可以參考點(diǎn)播視頻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
});
彈出全屏播放時(shí)的處理
這里主要分兩種情況：
在點(diǎn)擊播放按鈕開始播放時(shí)，微信劫持視頻彈出全屏播放，這時(shí)候Aliplayer也會(huì)觸發(fā)全屏事件，在這里調(diào)用取消全屏方法。
用戶點(diǎn)擊Controlbar上的全屏按鈕時(shí)，這個(gè)時(shí)候也會(huì)觸發(fā)全屏事件，在這里可以調(diào)整視頻為居中顯示。
上面兩種情況的處理有點(diǎn)不一樣的
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;
}
退出全屏?xí)r恢復(fù)視頻頂部播放
退出全屏的時(shí)候會(huì)出發(fā)事件，在事件里移除居中的樣式
this.player.on('cancelFullScreen',(e)=>{
let video=$(that.player.el()).find('video');
video.removeClass('center');
})
直播全屏播放
直播場(chǎng)景下會(huì)把視頻充滿整個(gè)屏幕，在上面顯示評(píng)論、點(diǎn)贊、主播和觀眾信息等，比如：
代碼可以參考全屏直播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"}
]
});
彈出全屏播放時(shí)的處理
在點(diǎn)擊播放按鈕開始播放時(shí)，微信劫持視頻彈出全屏播放，這時(shí)候Aliplayer也會(huì)觸發(fā)全屏事件，在這里調(diào)用取消全屏方法，并且調(diào)整評(píng)論、點(diǎn)贊等的布局。
let that = this;
this.player.on('requestFullScreen',(e)=>{
that.adjustLayout(true);
that.player.cancelFullScreen();
});
改變視頻顯示方式
全屏播放視頻默認(rèn)是平鋪的，如果想不平鋪可以設(shè)置object-fit的樣式為contain或其它
video{
object-fit: contain !important;
}
微信返回時(shí)關(guān)閉頁面
微信在原來的頁面上面打開另一個(gè)頁面全屏播放視頻， 如果正常流程返回時(shí)，是返回到程序原來的頁面，我希望是返回時(shí)直接關(guān)閉頁面。
this.player.tag.addEventListener("x5videoexitfullscreen",()=>{
if(WeixinJSBridge)
WeixinJSBridge.call('closeWindow');
});
視頻顯示模式和位置
如果"x_video_position"的兩個(gè)值top和center不能滿足要求，可以通過自定義object-fit和object-position屬性，進(jìn)行更靈活的設(shè)置視頻的顯示模式和位置。
object-fit屬性
該object-fit CSS屬性指定替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框
可選的值：
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
每個(gè)值的效果：
object-position屬性
object-position CSS屬性控制替換內(nèi)容位置，和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%;
}
效果
