TIMER 未显示在浏览器中，并在后台显示 MP4 视频-解网

问：

我正在 HTML 中创建一个倒数计时器，该计时器在后台播放一个 MP4 文件。由于某种原因，当我以本地主机身份打开 html 文件时，视频会播放，但我看不到计时器或任何按钮。有人可以帮我吗？

这是下面的代码。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #countdown-container {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }

    #countdown {
      font-size: 4em;
      color: white;
    }

    #video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #controls {
      position: absolute;
      bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="countdown-container">
    <div id="countdown"></div>
    <div id="controls">
      <button id="start-button" onclick="startCountdown()">Start</button>
      <button id="stop-button" onclick="stopCountdown()" disabled>Stop</button>
      <button id="add-10-seconds" onclick="addTime(10)" disabled>Add 10 Seconds</button>
      <button id="subtract-10-seconds" onclick="addTime(-10)" disabled>Subtract 10 Seconds</button>
    </div>
  </div>
  <video id="video-background" autoplay loop muted>
    <source src="background-video.mp4" type="video/mp4">
    Your browser does not support the video element.
  </video>

  <script>
    const countdownElement = document.getElementById("countdown");
    const videoBackground = document.getElementById("video-background");
    const startButton = document.getElementById("start-button");
    const stopButton = document.getElementById("stop-button");
    const add10SecondsButton = document.getElementById("add-10-seconds");
    const subtract10SecondsButton = document.getElementById("subtract-10-seconds");

    let countdown;
    let targetTime;
    let isCounting = false;

    function startCountdown() {
      const currentTime = new Date().getTime();
      targetTime = currentTime + 60000; // 60 seconds (adjust as needed)
      isCounting = true;

      startButton.disabled = true;
      stopButton.disabled = false;
      add10SecondsButton.disabled = true;
      subtract10SecondsButton.disabled = true;

      updateCountdown();
      countdown = setInterval(updateCountdown, 1000);
    }

    function stopCountdown() {
      isCounting = false;
      clearInterval(countdown);

      startButton.disabled = false;
      stopButton.disabled = true;
      add10SecondsButton.disabled = false;
      subtract10SecondsButton.disabled = false;
    }

    function addTime(seconds) {
      if (isCounting) {
        targetTime += seconds * 1000;
        updateCountdown();
      }
    }

    function updateCountdown() {
      const currentTime = new Date().getTime();
      const timeLeft = targetTime - currentTime;

      if (timeLeft <= 0) {
        countdownElement.innerHTML = "GAME OVER!";
        stopCountdown();
      } else {
        const seconds = Math.floor(timeLeft / 1000);
        countdownElement.innerHTML = seconds + "s";
      }
    }
  </script>
</body>
</html>

我曾尝试向 chatGPT 寻求帮助，但它提供的解决方案都没有奏效。此外，我已经在Chrome，Microsoft Edge和资源管理器中打开了该文件。

javascript html 谷歌浏览器

TIMER 未显示在浏览器中，并在后台显示 MP4 视频

TIMER not showing up in browser with MP4 video in BACKGROUND

评论