實現思路
通過 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>
👇覺得有幫助的朋友可以支持下作者哦,您的鼓勵是我創作的最大動力,如有開發問題可聯系作者