今天遇到这个微信浏览器下视频会全屏播放的问题。
直接给出最终解决方案:
<video x5-playsinline="" playsinline="" x-webkit-airplay="allow" style="object-fit:fill"></video>
解释几个关键属性:
- playsinline:设置
ios
在微信中内联播放视频 - x5-playsinline:设置
android
在微信中内联播放视频 - x-webkit-airplay:设置允许设备播放
- webkit-playsinline=””:设置支持内联视频播放,但需要在Obj-C里,webview设置allowsInlineMediaPlayback属性为YES【貌似Objective-C指的是ios那边但webview,所以这个属性单独设置没生效,可以不用加】
- object-fit:fill:这个属性类似背景图片的设置,fill代表填充,意为将视频宽高比例改变,以适应铺满容器大小
参考:
腾讯h5同层播放器接入规范:https://x5.tencent.com/tbs/gu…