893
使用Aliplayer在微信中播放視頻的正確姿勢
本文作者：沐欽
微信播放最大坑
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同層播放
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也會觸發全屏事件，在這裏調用取消全屏方法。注：播放器以後會實現這個邏輯
- 用戶點擊Controlbar上的全屏按鈕時，這個時候也會觸發全屏事件，在這裏可以調整視頻為居中顯示。
上麵兩種情況的處理有點不一樣的
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;
}
退出全屏時恢複視頻頂部播放
退出全屏的時候會出發事件，在事件裏移除居中的樣式
this.player.on('cancelFullScreen',(e)=>{
let video=$(that.player.el()).find('video');
video.removeClass('center');
})
直播全屏播放
直播場景下會把視頻充滿整個屏幕，在上麵顯示評論、點讚、主播和觀眾信息等，比如：
代碼可以參考全屏直播H5LiveDemo
創建播放器
通過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也會觸發全屏事件，在這裏調用取消全屏方法，並且調整評論、點讚等的布局。
var 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%;
}
效果
最後更新：2017-09-28 20:03:18