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会让视屏充满容器，可能导致视屏变形。

这样视屏就能自动撑满容器，并且按比例伸缩。

 

转载于:https://www.cnblogs.com/caoshufang/p/11098071.html