估计踩过微信视频坑的玩家心里都想说一句：“疯了！”而微信终于放出了《H5同层播放器接入规范》，这很正常……好了，闲话不说了，进入正题：1.标签中的inlineplayback相关属性微信在video标签，分别是：x5-video-player-type开启同层播放。该值固定为“h5”。x5-video-player-fullscreen是否全屏。该值为“真”或“假”。x5-video-orientation视频方向。取值为'landscape'、'portrait'或'landscape|portrait'，分别对应landscape、portrait和auto-rotation（这个应该少用）。不过需要注意的是，这些是x5的私有属性，只适用于Android平台。与iOS平台相关的是这些属性：airplayx-webkit-airplayplaysinlinewebkit-playsinline最后两个是iOS平台下的内联播放属性，都是布尔型属性，不需要赋值（存在为真）；前两个是iOS平台下airplay的相关属性（说实话，我还是不明白为什么网页需要airplay属性），取值为'allow'或'deny'。通常，为了保险起见，只需使用“允许”即可。2、CSS属性选择及取值微信在同层访问规范中提到了object-position属性，用于设置视频出现的位置。其实在尝试的过程中，配合object-fit属性同时使用效果会更好。但是这两个属性不是x5的私有属性，而是native的，所以对于Android和iOS平台都适用。object-position和object-fit这两个元素的主要作用是为“可替换元素”设置位置和大小。这里的“可替换元素”是指内容不受CSS显式控制的元素，典型的有、、和表单元素等。说回视频播放。微信官方同层访问规范推荐的方法是用js动态计算需要的像素值，然后给object-position属性赋值。但是我自己试了一下，发现object-position属性本身是支持百分比值的。通常视频默认值为'50%50%'，即居中；全屏视频一般需要放在底部，所以需要把值改成'0100%'。另一个属性object-fit有点类似于background-size属性。用于设置视频在容器中的填充方式。通常，您只需要取值'contain'（保持纵横比以填充容器）。不过这里需要注意的是，在全屏的情况下，由于视频一般不会完全填满屏幕（顶部标题栏不包括宽高比差异和输出分辨率），因此顶部会留有空隙。默认情况下，此间隙通常为黑色。如果你需要改变颜色，你必须先添加一个'display:block;'（因为视频默认是inline的），然后直接把background-color改成OK~3。视频封面标签中有与视频封面相关的属性poster，但在使用过程中发现存在一些性能问题。Android端打开（加载）视频时，会有跳动感，但如果去掉，加载视频时（preload值'auto'，不使用preload）会显示空白页.目前使用的是背景图的方式，但是由于视频全屏播放时顶部会出现空隙，所以额外增加了一个background-position:bottom;和背景大小：包含；添加了（数值与视频一致），这样设置好的视频背景在播放视频的时候不会漏出来。4.设置视频视口大小。建议在同层接入规范的resize事件回调中设置videoviewportsize。我习惯直接设置标签的宽高，所以在resize回调中加入：$('video'intheresizecallback).attr({'width':window.innerWidth+'px','height':window.innerHeight+'px'});会做。5、同层接入规范中给出了UA特征检测，判断是否为同层播放器方法：在微信等TBS中，通过UA判断X5内核版本进行区分，当前版本号>036849表示支持UA。示例：Mozilla/5.0（Linux；Android4.4.4；OPPOR7Build/KTU84P）AppleWebKit/537.36（KHTML，如Gecko）Version/4.0Chrome/37.0.0.0MobileMQQBrowser/6.8TBS/036849Safari/537.36MicroMessenger/6.3。27.861NetType/WIFILanguage/zh_CN安卓版QQ浏览器，当浏览器版本>=7.1时支持UA示例：UserAgent:Mozilla/5.0(Linux;U;Android4.4.4;zhcn;OPPOR7Build/KTU84P)AppleWebKit/537.36(KHTML,likeGecko)Version/4.0Chrome/37.0.0.0MQQBrowser/7.1MobileSafari/537.36参考资料：微信·H5同层播放器接入规范京东·视频H5の视频标签陷阱及如何让视频不显示的技巧微信H5全屏播放微信播放全屏问题HTML5视频音频详解张新旭半深入理解CSS3object-position/object-fit属性MDNobject-fitMDNobject-positionMDN媒体相关事件MDN可用替换ElementAppleDeveloperHTMLVideoElementAppleDeveloperHTMLMediaElementAppleDeveloperplaysInlineApple开发者选择加入或退出AirPlay
你疯了！——微信同级玩家连接（踩）入（坑）总结相关文章
