html5 video怎么居中,开发笔记4-H5视频适应屏幕并居中

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

因大部分视频是9:16，所以以9/16为例。

判断设备屏幕是否大于9/16，大于的设备，屏幕比例接近3/4，此时用高度百分百来适配，左右会留有黑边；而小于的设备，例如苹果X，此时用宽度百分百来适配，上下会有黑边。

那能不能反过来，大于比例的设备，用宽度百分百来适配，裁剪视频的上下部分，计算偏移量，通过偏移量来进行居中；同理，小于比例的设备，用高度百分百来适配，裁剪视频的左右部分。(此方式需要与制作视频的伙伴提前沟通，把重要信息放在没有被裁剪的安全范围内)

代码实例：

html：

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";

}

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