最近在项目中遇到了video标签设置宽高属性,始终无法改变宽高比的情况,导致想操作canvas画布与video输出的视频大小不一致,查了好久才解决,记录一下:
原来的代码:
<video
id="videocanvas"
width="500px"
height="350px"
autoplay
></video>
width属性和height属性不管怎设置始终输出的视频都无法与设置的一致,用百分比也没用;
解决方法:
<video
id="videocanvas"
style="width: 500px; height: 350px;object-fit: fill;"
autoplay
></video>
这样就可以解决了
知识点:
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。