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 属性指定元素的内容应该如何去适应指定容器的高度与宽度。