微信开发中，H5的video标签使用

<video></video>是HTML5新加入的标签，最近流行的h5开发多以video技术集成一个H5页面，效果也是很6的。现在总结一下用到的技术，主要的使用环境是微信，部分属性一些手机的默认浏览器不支持，这些还需要读者亲测。

<video
     id="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";
        }
    }