video 標籤在微信瀏覽器的問題解決方法

最近作的些web頁面,內嵌許多小視頻，在ios和安卓手機上播放時，遇到很多問題：

在微信瀏覽器內播放時，視頻會自動全屏

解決辦法：
給video標籤加一些屬性，調用h5原生video，我寫了個例子，加了註釋，若是有錯誤，煩指正，謝謝！

<video class="video-source"
     width="100%"
     controls  /*這個屬性規定瀏覽器爲該視頻提供播放控件*/  
     style="object-fit:fill"  /*加這個style會讓 Android / web 的視頻在微信裏的視頻全屏，若是是在手機上預覽，會讓視頻的封面同視頻同樣大小*/
     webkit-playsinline="true"  /*這個屬性是ios 10中設置可讓視頻在小窗內播放，也就是否是全屏播放*/  
     x-webkit-airplay="true"  /*這個屬性還不知道做用*/ 
     playsinline="true"  /*IOS微信瀏覽器支持小窗內播放*/ 
     x5-video-player-type="h5" /*啓用H5播放器,是wechat安卓版特性*/
     x5-video-orientation="h5" /*播放器支付的方向，landscape橫屏，portraint豎屏，默認值爲豎屏*/
     x5-video-player-fullscreen="true" /*全屏設置，設置爲 true 是防止橫屏*/
     preload="auto" /*這個屬性規定頁面加載完成後載入視頻*/ 
</video>

若是你的video標籤也加了上面的屬性，那麼，你的視頻能夠在IOS手機上的小窗口播放，同時，視頻封面同視頻的寬度與高度也保持一致了。

通過各類嘗試，在iOS下，能夠給video添加webkit-playsinline屬性，使視頻在頁面上本來位置播放，但這個屬性在安卓上無效。

/華麗麗的分割線，如下內容摘抄自網絡，供參考/

IOS微信瀏覽器是Chrome內核，下面大部分屬性都支持，安卓微信瀏覽器是X5內核，一些屬性是不支持的，好比能夠設置局部播放的屬性 playsinline，所以，始終是全屏。

下面的內容用以解釋上面的內容：

preload="auto" ：屬性規定在頁面加載後載入視頻。若是設置了 autoplay 屬性，則忽略該屬性。

通常參數可能的值：

· auto - 當頁面加載後載入整個視頻

· meta - 當頁面加載後只載入元數據

· none - 當頁面加載後不載入視頻

muted：當設置該屬性後，它規定視頻的音頻輸出應該被靜音

controls="controls" ：屬性規定瀏覽器應該爲視頻提供播放控件。

autoplay="autoplay"： 視頻自動播放設置，可是有經驗的人都應該知道，autoplay標籤在手機上不兼容，APP中設置問題致使沒法自動播放，不管安卓或IOS。須要模擬自動播放只能經過一些事件觸發。

webkit-playsinline playsinline：視頻播放時局域播放，不脫離文檔流 。可是這個屬性比較特別， 須要嵌入網頁的APP好比WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，若是APP不設置，你頁面中加了這標籤也無效，這也就是爲何安卓手機WeChat 播放視頻老是全屏，由於APP不支持playsinline，而ISO的WeChat卻支持。

這裏就要補充下，若是是想作全屏直播或者全屏H5體驗的用戶，ISO須要設置刪除 webkit-playsinline 標籤，由於你設置 false 是不支持的 ，安卓則不須要，由於默認全屏。但這時候全屏是有播放控件的，不管你有沒有設置control。 作直播的可能用得着播放控件，可是全屏H5是不須要的，那麼去除全屏播放時候的控件，須要如下設置：同層播放。

x5-video-player-type：啓用同層H5播放器，就是在視頻全屏的時候，div能夠呈如今視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫作沉浸式播放，播放的時候看似全屏，可是已經除去了control和微信的導航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS。筆者想過爲何同層播放只對安卓開放，由於安卓不能像ISO同樣局域播放，默認的全屏會使得一些界面操做被阻攔，若是是全屏H5還好，可是作直播的話，諸如彈幕那樣的功能就沒法實現了，因此這時候同層播放的概念就解決了這個問題。不過筆者在測試的過程當中發現，不一樣版本的ISO和安卓效果略有不一樣。

x5-video-orientation：聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認值portraint。不管是直播仍是全屏H5通常都是豎屏播放，可是這個屬性須要x5-video-player-type開啓H5模式

x5-video-player-fullscreen：全屏設置。筆者還未能領悟這個標籤的用意，在測試過程當中發現，ture和false的設置會致使佈局上的不同，如圖 Click標籤前後的位置。

另外補充下，ISO 微信瀏覽器是Chrome的內核，相關的屬性都支持，也是爲何X5同層播放不支持的緣由。安卓微信瀏覽器是X5內核，一些屬性標籤好比playsinline就不支持，因此始終全屏。

/貌似到這裏，瞭解了爲何安卓手機的全屏視頻了/

還有個問題，在Android的微信裏面，就算加上了上面的屬性，還會出現上下有黑邊，不能全屏的問題。

解決辦法：給video加上object-fit: fill;的style屬性。

/關於微信內置瀏覽器不能小窗口播放視頻的問題-知乎答/

在最新的ios微信6.5.3及其以後的版本中，webview默認支持小窗播放，
開發者須要特別注意小窗播放須要前端同時適配iOS10和iOS10如下的低版本

適配建議：須要徹底按照如下代碼設置video標籤纔可同時兼容不一樣的iOS版本

<video webkit-playsinline playsinline> </video>