如何根据条件切换网页背景视频？HTML/CSS/JS新手求助

Hey there! I see you're just starting out with HTML, CSS, and JavaScript and stuck on getting your background video to switch based on time. Let's break down what's going wrong and fix it together.

What's Not Working in Your Current Code #

• Your checking() function only runs once — it triggers when the page loads, but never checks again as time passes. So even if the hour changes, the video won't update.
• Targeting the wrong element — you're selecting the <source> tag with .video, but updating its src alone doesn't tell the browser to reload the video. Plus, directly working with the <video> element is simpler for this use case.
• Overly simple time condition — l>=0 will always be true, so it'll just set the same video every time (no actual switching based on different times).

Step-by-Step Fix #

Let's rewrite your code to address these issues:

Updated JavaScript Code

function timer() {
    const d = new Date();
    const time_hour = d.getHours();
    const time_min = d.getMinutes();
    const time_sec = d.getSeconds();

    // Update clock display
    document.querySelector("#hour").textContent = `${time_hour}:`;
    document.querySelector("#min").textContent = `${time_min}:`;
    document.querySelector("#sec").textContent = time_sec;

    // Check time and switch video EVERY time we update the clock
    checkAndSwitchVideo(time_hour);

    setTimeout(timer, 500);
}

function checkAndSwitchVideo(hour) {
    const videoElement = document.getElementById("myVideo");
    let targetVideo = "";

    // Customize these time ranges and video paths to fit your needs
    if (hour >= 6 && hour < 18) {
        targetVideo = "videos/day.mp4"; // Daytime video
    } else {
        targetVideo = "videos/night.mp4"; // Nighttime video
    }

    // Only update if the video source is different (avoids unnecessary reloads)
    if (!videoElement.src.includes(targetVideo)) {
        videoElement.src = targetVideo;
        videoElement.load(); // Tell the browser to load the new source
        videoElement.play(); // Ensure autoplay continues
    }
}

Updated HTML Code

We'll simplify the video element (you can also keep the <source> tag if you prefer, but directly setting the video's src is more straightforward here):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Clock</title>
</head>
<body onload="timer()">
    <video autoplay muted loop id="myVideo" type="video/mp4"></video>
    <div class="cont">
        <h2 class="made-by">Made By Muaaz Bin Sarfraz</h2>
    </div>
    <ul class="entry">
        <li id="hour"></li>
        <li id="min"></li>
        <li id="sec"></li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

Key Changes Explained #

• Integrated video checking into timer(): Now every time the clock updates, we also check if the video needs to switch. This ensures time changes are detected in real time.
• Directly target the <video> element: Updating its src and calling load() ensures the browser picks up the new video file. We also added a check to avoid reloading the same video repeatedly, which saves resources.
• Meaningful time conditions: Added a day/night split example — you can adjust the hour ranges and video paths to match your specific needs (e.g., separate videos for morning, afternoon, and evening).

Quick Notes to Keep in Mind #

• Double-check your video file paths: Make sure the videos folder is in the correct location relative to your HTML file (e.g., if your HTML is in the root directory, videos/day.mp4 should point to root/videos/day.mp4).
• Browser autoplay rules: You already have the muted attribute on the video, which is required for most browsers to allow autoplay — great job including that!

内容的提问来源于stack exchange，提问作者muaaz9329