video在ios中自动全屏

需求不来自于市场，而来自于领导在头条刷到什么。deadLine从来不是计划的日期，而是领导汇报的时间。

最近领导又要汇报了，只能对产品门户继续改改改。其中有一个需求是展示产品的相关介绍视频。那不是很简单么，用上video标签直接播放视频就行了。然而还是经历的比较少，在PC端、安卓端都正常的功能，ios端出现预期之外的功能——滑动界面，视频自动全屏。咱又解决不了提出问题的人，只能解决问题。

查看video的文档，发现playsinline属性

playsinline： 

一个布尔属性，指明视频将内嵌（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

 还有一些在文档中没有明确展示的属性：

<video
/*这个属性是ios 10中设置可以让视频在小窗内播放，即不全屏播放*/ 
  webkit-playsinline="true" 
 /*IOS微信浏览器支持小窗内播放*/
  playsinline="true" 
/*使此视频支持ios的AirPlay功能*/
  x-webkit-airplay="allow"
/*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-type="h5"
/*全屏设置，设置为 true 是防止横屏*/
  x5-video-player-fullscreen="true"
/*播放器支持的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
  x5-video-orientation="portraint" 
>
</video>

简单记录，以供后用。

可以关注我的公众号，交流相关技术，谢谢支持！