在网页中使用视频作为背景（方法+问题解决）

有时候我们写前端网页想要做出更酷的效果，可能就需要动态背景，那么下面交大家在页面中使用视频背景：

实现步骤

HTML部分：使用video标签来加载视频,autoplay属性设置视频自动播放
有些同学网页打开还是静态的，因为大部分浏览器都禁止自动播放视频，这个时候就需要加上 muted属性，将视频静音

<video  autoplay="autoplay" loop class="fillWidth" muted='muted' >
 <source src="../assets/02.mp4" type="video/mp4"/>
</video>

css部分：
让视频宽高都为百分百，然后铺满画面，这个要自己的布局了，如果视频覆盖了页面的话需要加上：position: absolute置于底层

.fillWidth {
    width: 100%;
    height: 100%;
    object-fit:fill;
  }

问题解决：

如果写好网页之后再本地运行没有问题，后面上传服务器访问的时候，出现了背景静态或者画面卡顿的问题，需要注意：

视频的大小尽量保证压缩在5M以内再上传至服务器，视频越大加载时间越长，所以就会出现卡顿或者不播放的问题！！