实现思路
通过 video + source 引入视频,并对视频播放属性进行设置,再通过 css 使视频覆盖背景即可。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有开发问题可联系作者</title>
</head>
<body><div class="login"><!--autoplay: 视频在就绪后马上播放loop: 循环播放muted: 静音播放source标签type属性支持的类型有: video/ogg,video/mp4,video/webm--><video class="video-background" autoplay="autoplay" loop="loop" muted="muted"><source src="../images/orange_animate.mp4" type="video/mp4" /></video></div>
</body>
<style>.login{width: 100%;height: 100%;display:flex;align-items: center;
}.video-background {position: fixed;top: 0;left: 0;min-width: 100%;height: 100%;width: auto;object-fit: cover;}</style>
</html>
👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者