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

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

“神经病啊！”

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

---

1. <video>标签里的内联播放相关属性

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

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

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

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

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

1. airplay

2. x-webkit-airplay

3. playsinline

4. webkit-playsinline

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

2. CSS的属性选择及取值

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

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

说回视频播放。微信官方的同层接入规范中推荐的做法，是用js动态计算需要的像素值，然后给object-position属性赋值。而我自己尝试了一圈下来，发现object-position这个属性本身支持百分比取值，通常视频默认的值是'50% 50%'，也就是居中；全屏视频一般情况下需要贴底放，所以要把取值改成'0 100%'。

另一个属性object-fit，有点类似background-size属性，用来设置视频在容器内的填充方式，平时用只需要取值'contain'（保持宽高比填满容器）就可以了。不过这里需要留意的是，全屏下，由于视频一般都不会正好填满屏幕（宽高比差异以及输出分辨率没算顶部标题栏），会在顶部留下一条空隙。这条空隙通常是默认黑色的，如果需要更改颜色，首先要加上个'display:block;'（因为video默认是inline的），然后直接改background-color就OK~

3. 视频封面

<video>标签里有一个与视频封面相关的属性poster，但是在使用中发现性能存在一些问题，在Android端打开视频时（加载），会有跳动的感觉，但是如果去掉，在视频加载时（preload取值'auto'，且未用预加载）则会显示空白页面。目前换用了背景图片的方式，但由于视频全屏播放时顶部会有空隙，所以额外加了个background-position: bottom;以及background-size: contain;（取值和视频保持一致），这样设置好的背景在播放视频时就不会漏边了。

4. 设置视频视口大小

同层接入规范里推荐在resize事件回调里设置视频视口大小，我习惯直接设置<video>标签的width和height，所以在resize回调里加入：

$('video')
        .attr({
            'width': window.innerWidth + 'px',
            'height': window.innerHeight + 'px'
        });

就可以了。

5. UA特性探测

同层接入规范里给的，判断是否是同层播放器方法：

1. 在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持
   UA示例:
   Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36
   (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8
   TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI
   Language/zh_CN

2. 在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持
   UA示例：User­Agent: Mozilla/5.0 (Linux; U; Android 4.4.4; zh­cn; OPPO R7
   Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0
   Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

---

参考资料：

1. 微信 · H5同层播放器接入规范

2. 京东 · 视频H5のVideo标签在微信里的坑和技巧

3. 关于如何在微信里面让video不全屏播放

4. H5微信播放全屏问题

5. HTML5中的视频音频使用详解

6. 张鑫旭 · 半深入理解CSS3 object-position/object-fit属性

7. MDN · object-fit

8. MDN · object-position

9. MDN · 媒体相关事件

10. MDN · 可替换元素

11. Apple Developer · HTMLVideo​Element

12. Apple Developer · HTMLMedia​Element

13. Apple Developer · plays​Inline

14. Apple Developer · Opting Into or Out of AirPlay