web頁面,內嵌許多小視頻，在ios和安卓手機上播放時，存在以下問題：
1、在微信瀏覽器內播放時，視頻會自動全屏2、如果每個視頻都有一張自定義的圖片作為封面，在顯示視頻的同時，如果沒有給這個視頻設置高度，視頻的容器在安卓手機上會被視頻的封面撐大到變形
解決辦法 :
<video class="video-source"
width="100%"
height="240px" /*如果有封面，請設置高度*/
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-page" /*啟用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模式
x5videoplayerfullscreen：全屏設置。筆者還未能領悟這個標簽的用意，在測試過程中發現，ture和false的設置會導致布局上的不一樣，如圖 Click標簽先后的位置。
另外補充下，ISO 微信瀏覽器是Chrome的內核，相關的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內核，一些屬性標簽比如playsinline就不支持，所以始終全屏。