今天事用html5的<video>標簽做微信內置瀏覽器視頻播放頁面時，需要在視頻層級上顯示類似彈幕的對話，發現部分機型（華為P40 pro,oppo reno,iphone7p）上點擊播放視頻后，視頻自動全屏播放，頁面其他元素無法顯示，探索良久，找出如下解決方案：
1、ios:
只需要添加屬性：
x5-playsinline playsinline webkit-playsinline
即可解決，例：
<video src="視頻地址" poster="視頻封面" controls x5-playsinline playsinline webkit-playsinline></video>
2、安卓微信內置瀏覽器
經過查閱相關資料，安卓微信內置瀏覽器內核為x5，使用該內核的瀏覽器還有手機QQ、京東等app的內置瀏覽器，僅添加上述屬性，可以解決自動全屏播放的問題，但是會導致新的問題：video標簽的層級過高，導致其他組件被遮擋，此時設定z-index屬性無效，需要添加如下的屬性即可解決，
x5-video-player-type="h5-page"
非專業前端人員，如有問題或者其他思路，請給出建議，
另外，小米8的微信打開視頻，不添加以上任何屬性，沒有任何問題，也很疑惑，麻煩大神幫忙解答一下，感謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/70663.html
標籤：AI