使用js怎么设置视频背景

锅盖哒2023-10-15 7:06

要使用JavaScript设置网页的视频背景，你需要将视频元素添加到你的HTML文档中，然后使用JavaScript来控制它

首先，在你的HTML文件中添加一个 <video> 元素

<video id="video-background" autoplay muted loop>
  <source src="your-video.mp4" type="video/mp4">
  <!-- 添加其他视频格式（如WebM、Ogg）的<source>标签，以提高浏览器兼容性 -->
</video>

id 属性设置为 "video-background"，并且我们使用了 autoplay、muted 和 loop 属性。这将使视频在页面加载时自动播放、静音播放以及循环播放。

在JavaScript文件中，获取对视频元素的引用并设置它的属性，以便将其作为页面的背景。

const video = document.getElementById("video-background");

// 设置视频的样式，使其充满整个屏幕并固定在背景
video.style.position = "fixed";
video.style.top = "0";
video.style.left = "0";
video.style.width = "100%";
video.style.height = "100%";
video.style.objectFit = "cover"; // 确保视频不会变形

// 使视频背景固定，不随页面滚动而滚动
document.body.style.overflow = "hidden";

// 在页面加载完毕后，播放视频
window.addEventListener("load", () => {
  video.play();
});

将视频元素设置为固定定位，并充满整个屏幕，创建了视频背景效果。它还禁用了页面的滚动（overflow: hidden），以确保视频背景固定在屏幕上。

当然要确保路径正确