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

最新推荐文章于 2024-04-15 18:41:13 发布

Beiyux

最新推荐文章于 2024-04-15 18:41:13 发布

阅读量4.9k

点赞数 1

文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_45745641/article/details/120959364

版权

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

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以内再上传至服务器，视频越大加载时间越长，所以就会出现卡顿或者不播放的问题！！

关注