移動(dòng)H5中，一般是高度百分百或者寬度百分百深啤，上下左右會(huì)有黑邊，但是有些客戶不能接受視頻存在黑邊路星，面對(duì)這種需求溯街，作者采用的是：
??因大部分視頻是9:16，所以以9/16為例洋丐。
??判斷設(shè)備屏幕是否大于9/16呈昔，大于的設(shè)備，屏幕比例接近3/4友绝，此時(shí)用高度百分百來(lái)適配堤尾，左右會(huì)留有黑邊；而小于的設(shè)備迁客，例如蘋果X哀峻，此時(shí)用寬度百分百來(lái)適配，上下會(huì)有黑邊哲泊。
??那能不能反過(guò)來(lái)，大于比例的設(shè)備催蝗，用寬度百分百來(lái)適配切威，裁剪視頻的上下部分，計(jì)算偏移量丙号，通過(guò)偏移量來(lái)進(jìn)行居中先朦；同理，小于比例的設(shè)備犬缨，用高度百分百來(lái)適配喳魏，裁剪視頻的左右部分。（此方式需要與制作視頻的伙伴提前溝通怀薛，把重要信息放在沒(méi)有被裁剪的安全范圍內(nèi)）
代碼實(shí)例：
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; // 視頻實(shí)際寬度
var videoHeight = 1920; // 視頻實(shí)際高度
if ((clientWidth / clientHeight) < (9 / 16)) { // 大于比例的設(shè)備
// 播放器采用高度百分百來(lái)適配
player.style.height = "100%";
// 計(jì)算視頻高度變?yōu)樵O(shè)備屏幕高度后的視頻寬度
var scaleWidth = videoWidth * clientHeight / videoHeight;
// 通過(guò)縮放后的視頻寬度減去設(shè)備寬度再除以2刺彩，計(jì)算出居中的偏移量
var moveLength = (scaleWidth - clientWidth) / (-2);
// 設(shè)置播放器往左偏移
player.style.left = moveLength + "px";
} else {
// 播放器采用寬度百分百來(lái)適配
player.style.width = "100%";
// 計(jì)算視頻寬度變?yōu)樵O(shè)備屏幕寬度后的視頻高度
var scaleHeight = videoHeight * clientWidth / videoWidth;
// 通過(guò)縮放后的視頻高度減去設(shè)備高度再除以2，計(jì)算出居中的偏移量
var moveLength = (scaleHeight - clientHeight) / (-2);
// 設(shè)置播放器往上偏移
player.style.top = moveLength + "px";
}
具體偏移還需要看視頻內(nèi)容，感覺(jué)上應(yīng)該有更好的實(shí)現(xiàn)方式创倔。小蝦米一枚嗡害，有更好的實(shí)現(xiàn)方式歡迎留言，共勉【抱拳】畦攘。
