有时候我们写前端网页想要做出更酷的效果,可能就需要动态背景,那么下面交大家在页面中使用视频背景:
实现步骤
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以内再上传至服务器,视频越大加载时间越长,所以就会出现卡顿或者不播放的问题!!