移动端解决方案--微信浏览器下阻止视频全屏播放

今天遇到这个微信浏览器下视频会全屏播放的问题。
直接给出最终解决方案:

<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…

    原文作者:东理阳阳
    原文地址: https://segmentfault.com/a/1190000012689604
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞