H5页面视频封面图片的问题

Question

目前有一个难题，视频封面图片因为视频标签高度限制的原因出现压缩变形的问题，无论使用img标签代替还是直接使用video标签的poster属性，都会因为视频高度的限制（业务需求，必须限制video标签的高度）出现封面图片压缩变形，这个问题困挠了好久，求各位大佬帮忙，感谢
压缩的封面图片

这个要怎么处理才能保证封面图片等比例显示呢

Answer 1

解决方案。

1. 不动程序，把封面图改了他，比如一些 cdn 支持裁图功能。基本上没啥工作量
2. 既然你都用 img 标签替换了。那你 background-image 不就得了？背景图你总会改裁图规则吧。

3. 方案2说了背景图。其实img也可以改裁图规则 object-fit

   1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

Answer 2

目前解决方案：
1、把当前图片进行裁剪
2、截取视频帧 为图片放在poster上