<video></video>是HTML5新加入的标签，最近流行的h5开发多以video技术集成一个H5页面，效果也是很6的。现在总结一下用到的技术，主要的使用环境是微信，部分属性一些手机的默认浏览器不支持，这些还需要读者亲测。
<videoid="videoID"src="video.mp4"poster="loadbg.jpg" 视频封面preload="auto"x-webkit-airplay="allow"x5-video-player-type="h5" 启用H5播放器,是wechat安卓版特性x5-video-player-fullscreen="true" 全屏设置，设置为 true 是防止横屏x5-video-orientation="portraint" 播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏webkit-playsinline="true" 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放playsinline="true" IOS微信浏览器支持小窗内播放style="object-fit:fill"> </video>
这里介绍下它的样式属性object-fit属性，它有两个可以用的值：fill和contain。fill是把视频拉伸或缩小，是视频正好平铺在video上，这样会造成影响的拉伸，慎重使用；而contain类似于background-size的contain值，它把视频放或缩小到容器能容下的最大尺寸，按照视频的分辨率放入video标签，这个属性不会引起影响的变形，但是如果video的宽高比不等于影响的宽高比，那么会又video的背景露出。
一般产品经理希望保证影像不变形的情况下，全屏播放（不露出video的背景），我的思路是，采用contain值，设置video的宽高都为100%，通过操作video标签的父容器尺寸改变video显示的部分。即，首先比较屏幕的宽高比和视频的宽高比，得出视频的宽不够还是高不够导致露出白边，然后让露出白边的video的父容器宽或高等于屏幕的宽或高，通过视频的分辨率即宽高比，计算出video父容器的另一个方向的长度（款或高），然后在屏幕上居中，并且超出部分隐藏即可。注意，不能直接操作video的宽或高，这样会没有作用，因为他的宽或高是跟着父容器走的。
献上代码：
function initVideoSize() {var videoBox = doc.querySelector(".videoBox");var fpsBox = doc.querySelector(".fpsBox");var maxBorder = Math.max(winWidth,winHeight),minBorder = Math.min(winWidth,winHeight);//最大的一边screenRatio = maxBorder / minBorder;//屏幕宽高比，我的视频是横屏，所以默认最长的是宽//视频不够宽if ( screenRatio > videoRatio ) {videoBox.style.height = maxBorder / videoRatio + "px";videoBox.style.width = maxBorder + "px";videoBox.style.marginTop = - (maxBorder / videoRatio - minBorder) / 2 + "px";videoBox.style.marginLeft = "0";fpsBox.style.height = maxBorder / videoRatio + "px";fpsBox.style.width = maxBorder + "px";fpsBox.style.marginTop = - (maxBorder / videoRatio - minBorder) / 2 + "px";fpsBox.style.marginLeft = "0";} else { //视频不够高videoBox.style.width = minBorder * videoRatio + "px";videoBox.style.height = minBorder + "px";videoBox.style.marginLeft = - (minBorder * videoRatio - maxBorder) / 2 + "px";videoBox.style.marginTop = "0";fpsBox.style.width = minBorder * videoRatio + "px";fpsBox.style.height = minBorder + "px";fpsBox.style.marginLeft = - (minBorder * videoRatio - maxBorder) / 2 + "px";fpsBox.style.marginTop = "0";}}
