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

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

 

posted @ 2019-06-27 16:50  Sofiaღ  阅读(1472)  评论(0编辑  收藏  举报