h5-video,视频在微信里变形、有黑边
如这种情况:
微信可谓是video标签的重灾区,如果你兼容了安卓的微信,那么在其他浏览器一般也没问题了除了个别(IE:你们看我干吗?)。
解决方案:
<video src="video/1.mp4" width="100%" height="100%" style="object-fit:cover;" id="video" type="video/mp4" webkit-playsinline playsinline preload="load"> </video>
主要是object-fit要设置为:cover,再加上宽高为100%。object-fit最好不要是fill,因为fill会让视屏充满容器,可能导致视屏变形。
这样视屏就能自动撑满容器,并且按比例伸缩。