预计踩过微信视频这个坑的，心田都想说上一句：
“精神病啊！”
而微信也终究出了个《H5同层播放器接入范例》，算是平常点了……好了闲话不说，下边进入正题：
1. <video>标签里的内联播放相干属性
微信在video标签上新增了一些x5的私有属性，离别是：
x5-video-player-type
启用同层播放。取值固定为'h5'。x5-video-player-fullscreen
是不是全屏。取值为'true'或'false'。x5-video-orientation
视频方向。取值离别为'landscape'、'portrait'或许'landscape|portrait'，离别对应横屏、竖屏及自动扭转（这个应该用的少）。
不过有一点须要注重的是，这些都是x5的私有属性，仅适用于Android平台。而跟iOS平台相干的，则是这几个属性：
airplayx-webkit-airplayplaysinlinewebkit-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特征探测
同层接入范例里给的，推断是不是是同层播放器要领：
在微信等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在QQ浏览器Android版本中,当浏览器版本>=7.1时最先支撑
UA示例：UserAgent: Mozilla/5.0 (Linux; U; Android 4.4.4; zhcn; 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
参考资料：
