2019獨角獸企業重金招聘Python工程師標準>>>

最近做的些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屬性，使視頻在頁面上原本位置播放，但這個屬性在安卓上無效。

轉載于:https://my.oschina.net/u/2393989/blog/2873653

總結

以上是生活随笔為你收集整理的video 标签存在的一些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。