神经病啊！——微信同层播放器接(踩)入(坑)总结

摘要：估计踩过微信视频这个坑的，内心都想说上一句神经病啊而微信也终于出了个同层播放器接入规范，算是正常点了好了闲话不说，下边进入正题标签里的内联播放相关属性微信在标签上新增了一些的私有属性，分别是启用同层播放。

估计踩过微信视频这个坑的，内心都想说上一句：

“神经病啊！”

而微信也终于出了个《H5同层播放器接入规范》，算是正常点了……好了闲话不说，下边进入正题：

微信在video标签上新增了一些x5的私有属性，分别是：

x5-video-player-type
启用同层播放。取值固定为"h5"。

x5-video-player-fullscreen
是否全屏。取值为"true"或"false"。

x5-video-orientation
视频方向。取值分别为"landscape"、"portrait"或者"landscape|portrait"，分别对应横屏、竖屏及自动旋转（这个应该用的少）。

不过有一点需要注意的是，这些都是x5的私有属性，仅适用于Android平台。而跟iOS平台相关的，则是这几个属性：

airplay

x-webkit-airplay

playsinline

webkit-playsinline

其中最后两个是iOS平台下的内联播放属性，都是布尔属性，不需要赋值（存在即是true）；前两个是iOS平台下airplay的相关属性（说实话我现在也没搞明白为什么网页需要airplay属性），取值为"allow"或"deny"，通常保险起见用"allow"就可以。

微信在同层接入规范中提到了object-position这个属性，用于设置视频出现的位置。实际在尝试的过程中，搭配object-fit属性同时使用的效果会比较好。但这两个属性并不是x5私有属性，而是原生的，所以它们同时适用于Android和iOS两个平台。

object-position和object-fit这两个元素主要的作用是为“可替换元素”设置位置和大小。这里的“可替换元素”，指的是内容不受CSS显式控制的元素，比如比较典型的就是、