video 標籤存在的一些坑

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

在微信瀏覽器內播放時，視頻會自動全屏 若是每一個視頻都有一張自定義的圖片做爲封面，在顯示視頻的同時，若是沒有給這個視頻設置高度，視頻的容器在安卓手機上會被視頻的封面撐大到變形

<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" /*啓用H5播放器,是wechat安卓版特性*/
     x5-video-orientation="h5" /*播放器支付的方向，landscape橫屏，portraint豎屏，默認值爲豎屏*/
     x5-video-player-fullscreen="true" /*全屏設置，設置爲 true 是防止橫屏*/
     preload="auto" /*這個屬性規定頁面加載完成後載入視頻*/ 
</video>

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

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