移動端解決方案--微信浏覽器下阻止視訊全屏播放

今天遇到這個微信浏覽器下視訊會全屏播放的問題。

直接給出最終解決方案：

<video x5-playsinline="" playsinline="" x-webkit-airplay="allow" style="object-fit:fill"></video>

解釋幾個關鍵屬性：

1. playsinline：設定

   ios

   在微信中内聯播放視訊
2. x5-playsinline：設定

   android

   在微信中内聯播放視訊
3. x-webkit-airplay：設定允許裝置播放
4. webkit-playsinline=""：設定支援内聯視訊播放，但需要在Obj-C裡，webview設定allowsInlineMediaPlayback屬性為YES【貌似Objective-C指的是ios那邊但webview，是以這個屬性單獨設定沒生效，可以不用加】
5. object-fit:fill：這個屬性類似背景圖檔的設定，fill代表填充，意為将視訊寬高比例改變，以适應鋪滿容器大小

參考：

騰訊h5同層播放器接入規範：https://x5.tencent.com/tbs/gu...