00:00:00
video视频播放宽高比与设置的不一致
最近在项目中遇到了 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 属性指定元素的内容应该如何去适应指定容器的高度与宽度。