开发笔记4-H5视频适应屏幕并居中

移动H5中，一般是高度百分百或者宽度百分百，上下左右会有黑边，但是有些客户不能接受视频存在黑边，面对这种需求，作者采用的是：

  因大部分视频是9:16，所以以9/16为例。
  判断设备屏幕是否大于9/16，大于的设备，屏幕比例接近3/4，此时用高度百分百来适配，左右会留有黑边；而小于的设备，例如苹果X，此时用宽度百分百来适配，上下会有黑边。
  那能不能反过来，大于比例的设备，用宽度百分百来适配，裁剪视频的上下部分，计算偏移量，通过偏移量来进行居中；同理，小于比例的设备，用高度百分百来适配，裁剪视频的左右部分。（此方式需要与制作视频的伙伴提前沟通，把重要信息放在没有被裁剪的安全范围内）

代码实例：
html：

<div id="videoView">
    <video id="video" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
</div>

css：

#videoView {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

#videoView video {
    position: absolute;
}

js：

var videoWidth = 1080; // 视频实际宽度
var videoHeight = 1920; // 视频实际高度
if ((clientWidth / clientHeight) < (9 / 16)) { // 大于比例的设备
    // 播放器采用高度百分百来适配
    player.style.height = "100%";
    // 计算视频高度变为设备屏幕高度后的视频宽度
    var scaleWidth = videoWidth * clientHeight / videoHeight;
    // 通过缩放后的视频宽度减去设备宽度再除以2，计算出居中的偏移量
    var moveLength = (scaleWidth - clientWidth) / (-2);
    //  设置播放器往左偏移
    player.style.left = moveLength + "px";
} else {
    // 播放器采用宽度百分百来适配
    player.style.width = "100%";
    // 计算视频宽度变为设备屏幕宽度后的视频高度
    var scaleHeight = videoHeight * clientWidth / videoWidth;
    // 通过缩放后的视频高度减去设备高度再除以2，计算出居中的偏移量
    var moveLength = (scaleHeight - clientHeight) / (-2);
    //  设置播放器往上偏移
    player.style.top = moveLength + "px";
}

具体偏移还需要看视频内容，感觉上应该有更好的实现方式。小虾米一枚，有更好的实现方式欢迎留言，共勉【抱拳】。