在ios和安卓手機裡的微信下播放視訊時，會遇到不少問題，例如需要手動點選，視訊才會播放，並且視訊會強制橫屏播放，跳出微信框，出現控制條，關閉後視訊殘留及引發佈局錯亂等問題。

解決辦法：

給video標籤加一些屬性，呼叫h5原生video

<video
  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*視訊封面*/
  preload="auto" 
  webkit-playsinline="true" /*這個屬性是ios 10中設定可以
                     讓視訊在小窗內播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信瀏覽器支援小窗內播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*啟用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏設定，
                     設定為 true 是防止橫屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape橫屏，portraint豎屏，預設值為豎屏*/
  style="object-fit:fill">
</video>
 

下面我們來看看這些屬性的作用：

poster="images/1.jpg":屬性規定視訊下載時顯示的影象，或者在使用者點選播放按鈕前顯示的影象。如果未設定該屬性，則使用視訊的第一幀來代替。

preload="auto" ：屬性規定在頁面載入後載入視訊。

webkit-playsinline和playsinline：視訊播放時局域播放，不脫離文件流 。但是這個屬性比較特別， 需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設定，你頁面中加了這標籤也無效，這也就是為什麼安卓手機WeChat 播放視訊總是全屏，因為APP不支援playsinline，而ISO的WeChat卻支援。

這裡就要補充下，如果是想做全屏直播或者全屏H5體驗的使用者，IOS需要設定刪除 webkit-playsinline 標籤，因為你設定 false 是不支援的 ，安卓則不需要，因為預設全屏。但這時候全屏是有播放控制元件的，無論你有沒有設定control。 做直播的可能用得著播放控制元件，但是全屏H5是不需要的，那麼去除全屏播放時候的控制元件，需要以下設定：同層播放。

x-webkit-airplay="allow"暫時無法確切的知道其作用，猜測，這個屬性應該是使此視訊支援ios的AirPlay功能。使用AirPlay可以直接從使用iOS的裝置上的不同位置播放視訊、音樂還有照片檔案，也就是說通過AirPlay功能可以實現影音檔案的無線播放，當然前提是播放的終端裝置也要支援相應的功能。

x5-video-player-type：啟用同層H5播放器，就是在視訊全屏的時候，div可以呈現在視訊層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時候看似全屏，但是已經除去了control和微信的導航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時不支援iOS。至於為什麼同層播放只對安卓開放，是因為安卓不能像ISO一樣局域播放，預設的全屏會使得一些介面操作被阻攔，如果是全屏H5還好，但是做直播的話，諸如彈幕那樣的功能就無法實現了，所以這時候同層播放的概念就解決了這個問題。不過在測試的過程中發現，不同版本的IOS和安卓效果略有不同。

x5-video-orientation：宣告播放器支援的方向，可選值landscape 橫屏, portraint豎屏。預設值portraint。無論是直播還是全屏H5一般都是豎屏播放，但是這個屬性需要x5-video-player-type開啟H5模式

x5­-video­-player­-fullscreen：全屏設定。它又兩個屬性值，ture和false，true支援全屏播放，false不支援全屏播放。

其實，IOS 微信瀏覽器是Chrome的核心，相關的屬性都支援，也是為什麼X5同層播放不支援的原因。安卓微信瀏覽器是X5核心，一些屬性標籤比如playsinline就不支援，所以始終全屏。

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

解決辦法：給video加上object-fit: fill;的style屬性。如果還是有黑邊有可能是視訊尺寸不合適。

視訊做BOX彈框播放，關閉視訊同時關閉box彈框，清空box彈框內所有的dom元素。這樣在andriod下會全屏播放，但關閉後不會引發頁面錯亂。

<!--HTML-->
<div class="video"></div>
<div class="box">

</div>
<!--JS-->
$('.video').on(''click",function(){
$(".box").append("<iframe height=498 width=510 src='http://player.youku.com/embed/XMjUyMDM2NTQ3Mg==' frameborder=0 'allowfullscreen'></iframe>");
$('.box').show();
})

$('.close').on("click",function(){
    $('.box').hide()
    $('.box').html(' ')
})